nicht angemeldet
Tutorial zu position für Neulinge
apsel
0 
Der Martin
0 0 apsel
Tutorial zu position für Neulinge
apsel
Om nah hoo pez nyeetz,
ich habe ein Tutorial zur Verwendung von position geschrieben und bitte um Hinweise.
Matthias
--
-
Hallo,
ich habe ein Tutorial zur Verwendung von position geschrieben und bitte um Hinweise.
Tutorialich hab's mir mal angesehen, bin aber noch nicht fertig damit. Trotzdem möchte ich schon mal meine ersten optischen Eindrücke schildern.
Optischer Eindruck: Dem gesamten Dokument (also dem body- oder dem html-Element) könnte etwas padding gut tun. Es sieht nicht schön aus, wenn der Text links und rechts bis aufs letzte Pixel an den Fensterrand reicht. Zumindest in meinem alten IE der kein tut er das, weil der nicht in der Lage ist, body kleiner als html zu machen.
obiges HTML hat folgende Struktur: <html> | |-<body> | |-<h1> | | | |-<span> | |-<p> | |-<a>
So sieht die Darstellung in einem Browser aus, der white-space:pre-wrap nicht kennt. Im Opera ist dagegen die ganze Baumstruktur, die damit dargestellt werden soll, an den rechten Rand gedrückt. Auch das sieht eigenartig aus.
Dass es mit alten IEs (bis IE6) wegen der fehlenden Unterstützung von white-space: pre-wrap nicht gut aussieht, weißt du offensichtlich auch schon. Das gilt aber auch für Opera vor Version 10. Warum dann nicht einfach white-space:pre?So long,
Martin--
TEAM: Toll, Ein Anderer Macht's.
-
[latex]Mae govannen![/latex]
Im Opera ist dagegen die ganze Baumstruktur, die damit dargestellt werden soll, an den rechten Rand gedrückt. Auch das sieht eigenartig aus.
Kann ich hier absolut nicht bestätigen. Ich habe mit 9.64, 9.52, 9.27 und 9.02 getestet, also zurück bis September 2006. Ältere Operas sind definitiv irrelevant, genauso wie IE5 FF1/2 usw.
Dass es mit alten IEs (bis IE6) wegen der fehlenden Unterstützung von white-space: pre-wrap nicht gut aussieht, weißt du offensichtlich auch schon. Das gilt aber auch für Opera vor Version 10. Warum dann nicht einfach white-space:pre?
Wozu so alten Dreck noch großartig unterstützen? Hier fällt der Bereich "Firmenrechner" wegen des Themas ohnehin raus. Wer privat diese Browser nutzt, muß halt mit ein paar Fehlern leben.
Cü,
Kai
--
Deutsches Liedgut international:
In early rope to mountain we pull
Foren-Stylesheet Site Selfzeug JS-Lookup
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?-
Hi!
Wozu so alten Dreck noch großartig unterstützen? Hier fällt der Bereich "Firmenrechner" wegen des Themas ohnehin raus.
Das erklaer doch mal eben bitte etwas genauer. Ich sehe die 'kaputte' Seite grad auf meinem Firmenrechner. Wieso faellt der nun raus?
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
[latex]Mae govannen![/latex]
Wozu so alten Dreck noch großartig unterstützen? Hier fällt der Bereich "Firmenrechner" wegen des Themas ohnehin raus.
Das erklaer doch mal eben bitte etwas genauer. Ich sehe die 'kaputte' Seite grad auf meinem Firmenrechner. Wieso faellt der nun raus?
Ich glaube nicht, daß an Firmenrechnern, die mit IE 5/6 bestückt sind, sich noch viele Leute über ein Tutorial wie von apsel neues Wissen über Webdesign aneignen wollen und dabei die Fehldarstellungen dieses Uralt-Browsers nicht kennen.
Ich finde, daß man IE < 7 -Unterstützung für private Seiten *komplett* einstellen sollte. Wer trotzdem an einem nicht-update-fähigen Firmenrechner private Seiten anschauen will, muß dann halt mit Fehlern leben. Insofern halte ich die Anmerkungen bezüglich Fehldarstellungen mit Martins Uralt-IE und Uralt-Opera einfach nicht mehr für relevant. Natürlich steht es Matthias frei, die Unzulänglichkeiten trotzdem zu beheben, aber ich würde mir die zusätzliche Arbeit für aussterbende Browser definitiv nicht mehr machen.
Cü,
Kai
--
Deutsches Liedgut international:
In early rope to mountain we pull
Foren-Stylesheet Site Selfzeug JS-Lookup
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?-
Hallo,
Ich glaube nicht, daß an Firmenrechnern, die mit IE 5/6 bestückt sind, sich noch viele Leute über ein Tutorial wie von apsel neues Wissen über Webdesign aneignen wollen und dabei die Fehldarstellungen dieses Uralt-Browsers nicht kennen.
ja, das lasse ich mal so stehen.
Ich finde, daß man IE < 7 -Unterstützung für private Seiten *komplett* einstellen sollte.
[...] aber ich würde mir die zusätzliche Arbeit für aussterbende Browser definitiv nicht mehr machen.Ich stimme dir im Kern zu, sehe es aber nicht ganz so entschlossen.
Wenn die Anpassung für alte, weitgehend irrelevante Browser mehrere Stunden Aufwand fürs Knobeln und fürs Testen bedeutet, würde ich auf diesen Aufwand auch verzichten, ohne mit der Wimper zu zucken, und diese Browser nur so weit berücksichtigen, dass die Seite entweder mit Darstellungsfehlern oder in einem Minimal-Styling wenigstens lesbar und nutzbar ist.
Wenn ich aber durch kleine Kniffe die Kompatibilität mit den Altbrowsern in wenigen Minuten herstellen kann, würde ich es auf jeden Fall tun.Ciao,
Martin--
"Hier steht, deutsche Wissenschaftler hätten es im Experiment geschafft, die Lichtgeschwindigkeit auf wenige Zentimeter pro Sekunde zu verringern." - "Toll. Steht da auch, wie sie es gemacht haben?" - "Sie haben den Lichtstrahl durch eine Behörde geleitet."
-
[latex]Mae govannen![/latex]
Ich finde, daß man IE < 7 -Unterstützung für private Seiten *komplett* einstellen sollte.
[...] aber ich würde mir die zusätzliche Arbeit für aussterbende Browser definitiv nicht mehr machen.Ich stimme dir im Kern zu, sehe es aber nicht ganz so entschlossen.
Wenn die Anpassung für alte, weitgehend irrelevante Browser mehrere Stunden Aufwand fürs Knobeln und fürs Testen bedeutet, würde ich auf diesen Aufwand auch verzichten, ohne mit der Wimper zu zucken, und diese Browser nur so weit berücksichtigen, dass die Seite entweder mit Darstellungsfehlern oder in einem Minimal-Styling wenigstens lesbar und nutzbar ist.
Wenn ich aber durch kleine Kniffe die Kompatibilität mit den Altbrowsern in wenigen Minuten herstellen kann, würde ich es auf jeden Fall tun.Ok, man behebt also eine/mehrere kleinen Bug(s). Kaum ist man damit fertig, bemerkt man z.B. einen Peekaboo. Man denkt sich: Ach, jetzt hab ich gerade die anderen Bugs behoben, dann kann ich das auch noch eben ... gesagt, getan. Schon sieht man einen double content Bug. Ach, den beheben wir dann auch noch ... und schon sind wieder Stunden vergangen.
Aber das ist alles nicht so schlimm. Ist ja „nur“ die Zeit des Web-Developers. Schlimmer ist es, daß man so nie den Druck aufbauen kann, der notwendig ist, um alte Browser _endlich_ mal auszurotten. Denn solange die kleinen und großen Bugs immer noch behoben werden, besteht kein Grund, auf neuere Browser umzustellen.
Cü,
Kai
--
Deutsches Liedgut international:
In early rope to mountain we pull
Foren-Stylesheet Site Selfzeug JS-Lookup
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?-
Hi,
Wenn ich aber durch kleine Kniffe die Kompatibilität mit den Altbrowsern in wenigen Minuten herstellen kann, würde ich es auf jeden Fall tun.
Ok, man behebt also eine/mehrere kleinen Bug(s). Kaum ist man damit fertig, bemerkt man z.B. einen Peekaboo. Man denkt sich: Ach, jetzt hab ich gerade die anderen Bugs behoben, dann kann ich das auch noch eben ... gesagt, getan. Schon sieht man einen double content Bug. Ach, den beheben wir dann auch noch ... und schon sind wieder Stunden vergangen.nein, du hast mich falsch verstanden. Die Effekte, die du als Beispiel nennst, halte ich für so nebensächlich und zumutbar, dass ich sofort achselzuckend zur Tagesordnung schreiten würde. Sie schränken die Nutzbarkeit einer Webseite nicht ein, sondern stellen nur kosmetische Fehler dar.
Anders ist es, wenn aufgrund von Unfähigkeiten und/oder Bugs Teile der Seite in einem alten IE gar nicht mehr sichtbar sind. Ich erlebe es beispielsweise oft, dass eine Seite im IE nicht scrollbar ist und mir dadurch große Teile des Inhalts fehlen. Oder dass bestimmte Elemente einfach nicht angezeigt werden, der Haupt-Inhaltsbereich leer bleibt.
Das sind erhebliche Fehler, die ich dann auch "korrigieren" möchte - und sei es dadurch, dass dem IE ein wesentlicher Teil des sonstigen Stylesheets vorenthalten wird, wenn mir die Ursache nicht auf Anhieb klar ist. Dann bekommt ein IE5/6 eben eine nahezu ungestylte Seite - so what?Aber das ist alles nicht so schlimm. Ist ja „nur“ die Zeit des Web-Developers. Schlimmer ist es, daß man so nie den Druck aufbauen kann, der notwendig ist, um alte Browser _endlich_ mal auszurotten.
Das will ich auch gar nicht - weder aus Nutzer- noch aus Autorensicht. Ich weiß selbst, wie vorteilhaft es in manchen Situationen sein kann, ältere Software zu benutzen und will dieses Recht auch anderen zugestehen. Wenn jemand aus wirklicher Überzeugung heute noch Windows 98 oder Acrobat Reader 4 verwendet, wäre ich der letzte, der ihn "bekehren" würde.
Ciao,
Martin--
Kopflosigkeit schützt nicht vor Migräne.
-
O diak ka lae?
Das sind erhebliche Fehler, die ich dann auch "korrigieren" möchte - und sei es dadurch, dass dem IE ein wesentlicher Teil des sonstigen Stylesheets vorenthalten wird, wenn mir die Ursache nicht auf Anhieb klar ist. Dann bekommt ein IE5/6 eben eine nahezu ungestylte Seite - so what?
Dann bekommt IE < 7 eben in Zukunft einen ähnlichen Universal-Bugfix wie zuletzt Netscape 4, direkt bei der Einbindung des StyleSheets:
<!--[if gte IE 7]><!--><link rel="stylesheet" type="text/css" href="styles.css" /><!--<![endif]-->
SCNR.(Aus einem der Beispiele von Stu Nicholls gebastelt, nicht getestet.)
Viele Grüße vom Længlich
--
Mein aktueller Gruß ist:
Tetum (gesprochen in Ost-Timor)-
Om nah hoo pez nyeetz,
ich habe die Anregungen aus diesem Thread eingearbeitet. Hat irgendjemand eine Idee, woher die fehlenden Zeilenumbrüche im IE7 (eigentlich IE8 im IE7-Modus), zum Beispiel 1. Zeile Kapitel absolute, stammen?
Matthias
--
-
-
-
-
-
Moin!
Ich glaube nicht, daß an Firmenrechnern, die mit IE 5/6 bestückt sind, sich noch viele Leute über ein Tutorial wie von apsel neues Wissen über Webdesign aneignen wollen und dabei die Fehldarstellungen dieses Uralt-Browsers nicht kennen.
Auch wenn Martin das scheinbar befuerwortet:
Ausser mir weiss hier in der Abteilung niemand, was position ueberhaupt ist. Wenn ich also mal wieder im Urlaub angerufen werde weil irgendwer wichtiges sich ueber irgendwas beklagt und das sofort abgestellt haben will, dann erklaerbaere ich sicher nicht erst Positionierung in HTML/CSS. Dann gebe ich einfach ein Stichwort und lass sie suchen. Angenommen, dieser Mitarbeiter kann dann den echt wichtigen Menschen nicht abwimmeln und muss wirklich suchen, dann findet er vielleicht eine Seite (kann auch jedes x-beliebige andere Thema sein) die so gar nicht im IE6 funktionieren will. Was dann? Sie bewerten die Seite natuerlich als schlecht. Offensichtlich hat der Ersteller der Seite ja keine Ahnung. Also wird weitergesucht und der naechste Eintrag ist eine Seite in Tabellendesign der eben dieses oder totale absolute Positionierung empfiehlt. Na also. Da hat man nun endlich eine kompetente Seite gefunden. Und ich freu mich wenn ich dann wieder da bin.
Seh ich das richtig? Ihr seht eine im IE nicht darstellbare Seite als ABM fuer Leute wie mich? Kommt auf dauer auch nicht gut, wenn ich immer schon existierende Seiten umschreiben will. Das interessiert naemlich irgendwie keine Sau solange alles so laeuft wie es soll. Wenn dann einer spaeter fragt, warum etwas nicht so und so funktioniert und ich dann antworte dass es kein Problem sei, wenn die Seite anders gebaut waere will der Jemand auch nur wissen, warum ich das nicht schon lange so gemacht habe. Details interessieren bekanntlich kein Schwein. Ich mag Seiten wie die von Aspel, die alles schoen einfach erklaeren. Jetzt muessen sie nur noch den Eindruck erwecken, dass er ueberhaupt weiss, was er schreibt.
Ich finde, daß man IE < 7 -Unterstützung für private Seiten *komplett* einstellen sollte. Wer trotzdem an einem nicht-update-fähigen Firmenrechner private Seiten anschauen will, muß dann halt mit Fehlern leben. Insofern halte ich die Anmerkungen bezüglich Fehldarstellungen mit Martins Uralt-IE und Uralt-Opera einfach nicht mehr für relevant. Natürlich steht es Matthias frei, die Unzulänglichkeiten trotzdem zu beheben, aber ich würde mir die zusätzliche Arbeit für aussterbende Browser definitiv nicht mehr machen.
Jain. Kommt auf den Inhalt an. Sicher muss ich von der Arbeit nicht die aktuellen Ergebnisse meiner Blood Bowl Liga erfahren. Ansonsten waere es schoen, wenn die Seite wenigstens halbwegs aufgeraeumt und nicht total zerfleddert wirkt.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
[latex]Mae govannen![/latex]
Ausser mir weiss hier in der Abteilung niemand, was position ueberhaupt ist. Wenn ich also mal wieder im Urlaub angerufen werde weil irgendwer wichtiges sich ueber irgendwas beklagt und das sofort abgestellt haben will, dann erklaerbaere ich sicher nicht erst Positionierung in HTML/CSS. Dann gebe ich einfach ein Stichwort und lass sie suchen. Angenommen, dieser Mitarbeiter kann dann den echt wichtigen Menschen nicht abwimmeln und muss wirklich suchen, dann findet er vielleicht eine Seite (kann auch jedes x-beliebige andere Thema sein) die so gar nicht im IE6 funktionieren will. Was dann? Sie bewerten die Seite natuerlich als schlecht. Offensichtlich hat der Ersteller der Seite ja keine Ahnung. Also wird weitergesucht und der naechste Eintrag ist eine Seite in Tabellendesign der eben dieses oder totale absolute Positionierung empfiehlt. Na also. Da hat man nun endlich eine kompetente Seite gefunden. Und ich freu mich wenn ich dann wieder da bin.
Dann muß die Firma eben dafür sorgen, daß ein zumindest halbwegs adäquater Ersatz zur Verfügung steht, wenn ein (bestimmter) Mitarbeiter in Urlaub geht und solche (nicht bis Urlaubsende aufschiebbaren) Situationen auftreten können. Verfehlte Firmenpolitik halte ich hier für kein brauchbares Argument.
Seh ich das richtig? Ihr seht eine im IE nicht darstellbare Seite als ABM fuer Leute wie mich? Kommt auf dauer auch nicht gut, wenn ich immer schon existierende Seiten umschreiben will. Das interessiert naemlich irgendwie keine Sau solange alles so laeuft wie es soll. Wenn dann einer spaeter fragt, warum etwas nicht so und so funktioniert und ich dann antworte dass es kein Problem sei, wenn die Seite anders gebaut waere will der Jemand auch nur wissen, warum ich das nicht schon lange so gemacht habe. Details interessieren bekanntlich kein Schwein.
Was du hier sagen willst, habe ich leider auch nach dreimaligem Lesen nicht so recht verstanden. Vielleicht denke ich gerade in die falsche Richtung.
Kommt auf den Inhalt an. Sicher muss ich von der Arbeit nicht die aktuellen Ergebnisse meiner Blood Bowl Liga erfahren. Ansonsten waere es schoen, wenn die Seite wenigstens halbwegs aufgeraeumt und nicht total zerfleddert wirkt.
Leider scheint das aber die einzig gangbare Strategie zu sein, den IE 6 innerhalb der nächsten 20 Jahre auf ein erträgliches Maß zu reduzieren. ;)
Cü,
Kai
--
Deutsches Liedgut international:
At the fountain in front of the gate
Foren-Stylesheet Site Selfzeug JS-Lookup
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:? -
Om nah hoo pez nyeetz,
Ich mag Seiten wie die von Aspel, die alles schoen einfach erklaeren. Jetzt muessen sie nur noch den Eindruck erwecken, dass er ueberhaupt weiss, was er schreibt.
ich nehm das mal als Lob und Ansporn.
Matthias
--
-
-
-
-
-
Om nah hoo pez nyeetz,
ich hab's mir mal angesehen, bin aber noch nicht fertig damit. Trotzdem möchte ich schon mal meine ersten optischen Eindrücke schildern.
Dafür schon mal danke.
Optischer Eindruck: Dem gesamten Dokument (also dem body- oder dem html-Element) könnte etwas padding gut tun. Es sieht nicht schön aus, wenn der Text links und rechts bis aufs letzte Pixel an den Fensterrand reicht. Zumindest in meinem alten IE der kein tut er das, weil der nicht in der Lage ist, body kleiner als html zu machen.
Es ist leider ein starres Layout mit einer body-Breite von 900px.
Warum dann nicht einfach white-space:pre?
ist für alte ies per cc eingefügt. Ich kann aber auch ohne großen Aufwand die Zeilenumbrüche per Hand setzen. Es betrifft ja nur die Quelltext-Divs.
Matthias
--
-
Zhoyo!
Es ist leider ein starres Layout mit einer body-Breite von 900px.
Das kann man ja ändern. ;-)
Wobei es bei dieser recht vernünftigen Breite und der flexiblen Höhe auch kein allzu großes Problem ist. Höchstens vielleicht auf Handhelds.Warum dann nicht einfach white-space:pre?
ist für alte ies per cc eingefügt. Ich kann aber auch ohne großen Aufwand die Zeilenumbrüche per Hand setzen.
Wow, eine Extra-Behandlung für den MSIE*! :D
Es betrifft ja nur die Quelltext-Divs.
Warum sind das <div>s und nicht <code>s? ;-)
Den Dokument-Baum würde ich eher mit verschachtelten <ul>s oder <dl>s basteln als durch Präformatierung. Oder, im Falle von Präformatierung, lieber ─│└├ statt |- verwenden (Unicode-Block »Box-Drawing«, 2500 – 257F).Inhaltlich ist das Tutorial gar nicht übel, und vor allem auch leicht verständlich. Wie im anderen Teilthread geschrieben ist es wohl sinnvoll, den Text bzgl. position:relative noch ein wenig ausführlicher zu schreiben. Das Beispiel dazu zeigt die Wirkung ja schon recht gut.
Vielleicht auch nochmal explizit erwähnen, daß (anders als bei absolute oder fixed) der ursprüngliche Platz im Textfluß reserviert bleibt – das haben nach meiner Erfahrung schon einige mißverstanden bzw. nicht beachtet.Viele Grüße vom Længlich
* Martins Steinzeitlicher Internet Explodierer
--
Mein aktueller Gruß ist:
Giryama (gesprochen in Afrika)-
Om nah hoo pez nyeetz,
ist für alte ies per cc eingefügt. Ich kann aber auch ohne großen Aufwand die Zeilenumbrüche per Hand setzen.
Wow, eine Extra-Behandlung für den MSIE*! :D
mit den Zeilenumbrüchen per Hand hat sich die dann aber erledigt.
Es betrifft ja nur die Quelltext-Divs.
Warum sind das <div>s und nicht <code>s? ;-)
Gute Frage ;-)
Den Dokument-Baum würde ich eher mit verschachtelten <ul>s oder <dl>s basteln als durch Präformatierung. Oder, im Falle von Präformatierung, lieber ─│└├ statt |- verwenden (Unicode-Block »Box-Drawing«, 2500 – 257F).
Da kann man ja richtig loslegen mit first-child und so für die (notwendigerweise grafischen?) Aufzählungssymbole - ne, ne
eine Grafik wäre vielleicht das Optimum.Inhaltlich ist das Tutorial gar nicht übel, und vor allem auch leicht verständlich. Wie im anderen Teilthread geschrieben ist es wohl sinnvoll, den Text bzgl. position:relative noch ein wenig ausführlicher zu schreiben. Das Beispiel dazu zeigt die Wirkung ja schon recht gut.
Vielleicht auch nochmal explizit erwähnen, daß (anders als bei absolute oder fixed) der ursprüngliche Platz im Textfluß reserviert bleibt – das haben nach meiner Erfahrung schon einige mißverstanden bzw. nicht beachtet.Danke für die Anregung.
Matthias
--
-
-
-
-
Hi there,
ich habe ein Tutorial zur Verwendung von position geschrieben und bitte um Hinweise.
Ein kleiner Hinweis wäre zu erwähnen, wozu position:relative eigentlich wirklich da ist. Du schreibst: "Wie wir weiter oben schon bemerkt haben, verwendet man meist position: relative;, um den Bezugspunkt für absolut positionierte Kind-elemente festzulegen." - Du verschweigst aber den eigentlichen Zweck, nämlich Elemente eben 'relativ' zu jenem Platz zu positionieren, den sie im Fluss des Dokuments ohne diese Postionierung hätten...
-
Om nah hoo pez nyeetz,
Ein kleiner Hinweis wäre zu erwähnen, wozu position:relative eigentlich wirklich da ist. Du schreibst: "Wie wir weiter oben schon bemerkt haben, verwendet man meist position: relative;, um den Bezugspunkt für absolut positionierte Kind-elemente festzulegen." - Du verschweigst aber den eigentlichen Zweck, nämlich Elemente eben 'relativ' zu jenem Platz zu positionieren, den sie im Fluss des Dokuments ohne diese Postionierung hätten... ???
der komplette Absatz lautet:
Wie wir weiter oben schon bemerkt haben, verwendet man meist position: relative;, um den Bezugspunkt für absolut positionierte Kind-elemente festzulegen. Dafür kann man aber auch jede andere Positionierung verwenden.
position: relative; richtet das Objekt quasi an sich selbst aus, also an der Position, die es ohne position: relative; hätte.Vielleicht tut dort ein zusätzlicher Absatz gut.
Matthias
--
-