nicht angemeldet
Ein möglicher Weg zur Seitengestaltung...
Tag zusammen! <img src="http://parkbanksitzer.milten.lima-city.de/smilies/smile.gif" border="0" alt="">
Fast kein Tag vergeht, wo hier im Forum nicht Fragen a là "Der IE stellt meine CSS Angaben nicht so dar, wie ich will" oder "Wieso macht Opera oder Mozilla dieses und jenes nicht" etc. gestellt werden.
Die verschiedenen Darstellungen ein und der selben Seite durch unterschiedliche Browser haben sicher fast schon jeden hier in den Wahnsinn getrieben. An der Problematik an sich kann man nichts ändern - also muß man sich überlegen, wie man trotzdem halbwegs nervenschonend zur fertigen Seite kommt.
Ich habe oft das Gefühl, viele Leute schreiben zunächst mal eine ganze Seite und machen nur - wenn überhaupt - gelegentlich Zwischenkontrollen. Und das oft nur mit einem Browser. Irgendwann ist die Seite dann fertig. Eine Seite mit vielen divs, die per CSS alle unterschiedlich mit margin, padding, float, etc. formatiert sind - oft noch ineinander verschachtelt.
Wenn sich die Schreiber der Seite dann das Ergebnis in den unterschiedlichsten Browsern ansehen, sind sie schockiert, wie unterschiedlich das Ergebnis ist. <img src="http://parkbanksitzer.milten.lima-city.de/smilies/erstaunt.gif" border="0" alt="">
Und dann machen sie den fatalen Fehler. Sie nehmen eines der divs mitten aus der Seite und ändern oder erweitern die CSS Angaben dafür. Sie basteln und spielen herum, bis dieses div in allen Browsern so dargestellt wird, wie sie es erwarten. Da aber viele div-Bereiche verschachtelt sind oder durch die CSS-Formatierung im Zusammenhang stehen, bewirkt das dann, daß jetzt andere Teile der Seite plötzlich im einen oder anderen Browser völlig skurril ausgegeben werden. Dann basteln sie an diesem Problem.
Es entsteht ein nie enden wollender Teufelskreis mit dem Ergebnis, daß es der Autor der Seite entweder aufgibt, hier um Hilfe schreit oder einfach auf ein Tabellenlayout zurückgeht.
Um jedoch gar nicht soweit zu kommen, habe ich mir angewöhnt, jedes mal, wenn ich eine Seite erstelle, den selben Weg zu gehen: Das Prinzip dabei ist, von außen nach innen zu gehen und jeden neuen Berich der Seite erst zu beginnen, wenn das bisher Geschriebene in allen Browsern zufriedenstellend dargestelt wird. Das heißt, ich definiere z.B. zunächst mal ein div für den Hintergrund. Dann kommt der Check mit IE, Navigator, Mozilla, Firefox und Opera. Wird dieser soeben geschriebene Bereich der Seite in allen Browsern gleich dargestellt, folgt noch die Kontrolle durch den Validator, ob das html bis dato korrekt ist.
Und erst, wenn BEIDE Konrollen OK sind, folgt das nächste div. Z.B. der Hauptanzeigeberich, in dem später Bilder, Text und Tabellen sind. Dabei empfiehlt es sich, auch divs, die nur dazu da sind, um Bilder, Text oder Tabellen zu beherbergen und keine Farbe oder Rand haben, zunächst mit einer auffälligen Farbe zu formatieren. Das selbe Prinzip gilt auch für Absätze.
Ich färbe z.B. ein div pink ein und schreib da einen Test-Absatz hinein, der einen knallgelben Hintergrund bekommt. Nur JETZT kann ich in allen Browsern kontrollieren - sind die divs in allen Browsern gleich breit, hat der Absatz in allen Browsern die gleichen Abstände zum div, hat der Text in allen Browsern den gleichen Abstand zum Rand des Absatzes, u.s.w.
Tritt hier ein Problem auf und ein Absatz klebt z.B. im Opera am Rand, soll dies aber nicht tun, dann kann ich JETZT mit margin, padding, ... herumspielen, bis das Problem behoben ist. Erst, wenn das Ergebnis in allen 4 Browsern gleich ist, nehme ich die häßlichen Farbfüllungen weg, validiere wieder und es kommt das nächste div, die nächste Tabelle, der nächste Absatz, etc.
Und so geht das immer weiter, bis die Seite fertig ist. Man mag dem jetzt entgegenhalten, daß diese Art mühsam, kompliziert, unnötig oder was auch immer ist. Ich kann aus Erfahrung nur sagen - wenn man seine Seiten immer in diesem Step-by-Step + Browserkontrolle - System schreibt, kommt es NIE dazu, daß man irgendwann vor dem Problem steht, einene Darstellungsfehler zu beheben und damit den nächsten Darstellungsfehler auszulösen. Im Endeffekt ist man somit oft schneller - in jedem Fall aber nervenschonender - mit seiner Seite fertig, als würde man zuerst alles schreiben und dann erst anfangen, die Darstellungsfehler auszumärzen. <img src="http://parkbanksitzer.milten.lima-city.de/smilies/pbs01.gif" border="0" alt="">
Daß viele es nicht so tun, kann man daraus schön sehen, daß bei den Darstellungsproblemen, die hier oft beschrieben werden, das eigentliche Problem gar nicht in der Formatierung des Bereiches liegt, der falsch dargestellt wird, sondern durch die CSS-Angaben eines ganz anderen Elements, welches direkt daneben liegt oder das Elternelement ist.
Conclusio : Ich kann daher allen Anfängern und Leuten, die sich mit den browserunterschiedlichen Darstellungsformen immer wieder herumärgern, den oben beschrieben Weg wärmstens empfehlen. Seit ich so arbeite habe ich bis jetzt noch jede Seite für alle Browser fast ident hinbekommen und mir stundenlange Fehlersuche gespart.
Außerdem hat dieser Weg auch den Vorteil, daß, wenn man mal vor einem Problem steht, dies dann zu diesem Zeitpunkt das einzige Darstellungsproblem ist und sich eine Hilfestellung wie z.B. hier im Forum einfacher und schneller bewerkstelligen läßt.
Und wie seht IHR das???
Liebe Grüße
parkbanksitzer <img src="http://parkbanksitzer.milten.lima-city.de/smilies/pbs02.gif" border="0" alt="">
-
Moin Parkbanksizer,
<img src="http://parkbanksitzer.milten.lima-city.de/smilies/smile.gif" border="0" alt="">
btw: Findest du eigentlich nicht auch, dass diese smilys nerven?
Fast kein Tag vergeht, wo hier im Forum nicht Fragen a là "Der IE stellt meine CSS Angaben nicht so dar, wie ich will" oder "Wieso macht Opera oder Mozilla dieses und jenes nicht" etc. gestellt werden.
Sei mal ehrlich: Eigentlich vergeht fast keine stunde ohne diesen Fragen.
Die verschiedenen Darstellungen ein und der selben Seite durch unterschiedliche Browser haben sicher fast schon jeden hier in den Wahnsinn getrieben. An der Problematik an sich kann man nichts ändern - also muß man sich überlegen, wie man trotzdem halbwegs nervenschonend zur fertigen Seite kommt.
jo. Nach standarts arbeiten, sage ich nur. Wer z.B. seine Seiten nicht nach dem IE-Boxmodel aufbaut und sich danach wundert, dass Moz und Opera die Seite >>falsch<< darstellen, der hat schon mal prinizipiell gelernt.
Noch besser, wenn er während des Erstellens gleich schon entsprechende Workarounds einarbeitet. Aber wer denkt schon so weit? Design ist heutzutage mehr oder weniger friemelarbeit, wenn man immer alles Perfekt haben will.Ich habe oft das Gefühl, viele Leute schreiben zunächst mal eine ganze Seite und machen nur - wenn überhaupt - gelegentlich Zwischenkontrollen. Und das oft nur mit einem Browser. Irgendwann ist die Seite dann fertig. Eine Seite mit vielen divs, die per CSS alle unterschiedlich mit margin, padding, float, etc. formatiert sind - oft noch ineinander verschachtelt.
Hmm... eigentlich ist das bei mir so: In meinem Kopf schwebt ein Gedanke von einer Seite rum. Dann öffne ich Opera/Mozilla/IE, erstelle eine leere Textdatei und beginne zu tippen. Dann habe ich mein HTML-Grundgerüst, ohne jegliche Auszeichnung. Anschließend mache ich mir ein CSS, wo ich halt Stück für stück immer "feiner" vorgehe (immer mehr formatierungen hier und dort).
Wenn sich die Schreiber der Seite dann das Ergebnis in den unterschiedlichsten Browsern ansehen, sind sie schockiert, wie unterschiedlich das Ergebnis ist. <img src="http://parkbanksitzer.milten.lima-city.de/smilies/erstaunt.gif" border="0" alt="">
jo, das ist bei Leuten, die nicht mal wissen, dass es andere Browser als den IE gibt, so üblich.
Und dann machen sie den fatalen Fehler.
[viel gerede]
Außerdem hat dieser Weg auch den Vorteil, daß, wenn man mal vor einem Problem steht, dies dann zu diesem Zeitpunkt das einzige Darstellungsproblem ist und sich eine Hilfestellung wie z.B. hier im Forum einfacher und schneller bewerkstelligen läßt.
Und wie seht IHR das???Naja, meiner Meinung nach sollte jeder seine Seiten so erstellen, wie er es für richtig hält. Ich meine, man merkt es ja eigentlich, wenn die verwendete Methode ineffektiv ist.
Bezüglich Forenfragen: Wenn es eben nur ein kleines Problem ist, braucht man ja auch nicht alles umliegendes zu erklären und komplette Stylesheet-Dateien hier zu posten, nach dem motto >>wo ist der fehler?<<. Das sollte eine grundlegende Anforderung an Forenbenutzer sein.Gruß,
Sven
--
!: I'm back!
Selfcode: ie:% fl:| br:^ va:{ ls:& fo:) rl:( n4:( ss:) de:> js:| ch:° mo:} zu:}
Encode: http://forum.de.selfhtml.org/cgi-bin/selfcode.pl
Decode: http://peter.in-berlin.de/projekte/selfcode/
E-Mail: coming soon
me: 'd comed long ago -
Hi,
im Prinzip kann man Deinen Text fast per Copy & Paste als grundsätzliche Empfehlung verwenden. Eine "Kleinigkeit" möchte ich aber noch anmerken:
Um jedoch gar nicht soweit zu kommen, habe ich mir angewöhnt, jedes mal, wenn ich eine Seite erstelle, den selben Weg zu gehen: Das Prinzip dabei ist, von außen nach innen zu gehen und jeden neuen Berich der Seite erst zu beginnen, wenn das bisher Geschriebene in allen Browsern zufriedenstellend dargestelt wird. Das heißt, ich definiere z.B. zunächst mal ein div für den Hintergrund. Dann kommt der Check mit IE, Navigator, Mozilla, Firefox und Opera. Wird dieser soeben geschriebene Bereich der Seite in allen Browsern gleich dargestellt, folgt noch die Kontrolle durch den Validator, ob das html bis dato korrekt ist.
Hier gehst Du IMHO exakt verkehrt herum vor:
_Zuallererst_ sollte der Validator-Check erfolgen - wenn Du diesen als letztes durchführst und Fehler zu korrigieren hast, geht ansonsten das bereits Getane von vorne los, während es eher unwahrscheinlich ist, bei Nachbesserungen am Code noch Fehler zu produzieren.
Dann sollte man in Gecko-basierten Browsern testen. Diese machen a) am wenigsten Fehler und sind b) am wenigsten fehlertolerant. Man merkt also sofort, ob man (über die Validität hinaus) Unsinn produziert hat oder ob es passt.
Ob man dann erst in Opera oder erst im IE testet, ist gehupft wie gesprungen. Beide haben ihre Macken - der IE natürlich per se, Opera vor allem im "folgen wir doch mal dem IE"-Quirks-Mode.
Nach den vermutlich zwangsläufigen Anpassungen für die vielen IE-Bugs und Opera-Wechselverhältnissen reicht zumeist ein kurzer erneuter Blick auf Mozilla; wenn man nur ein ganz klein wenig geübt ist, wird man für diesen nichts verbaut haben. Ginge man anders herum vor - erst IE, dann Mozilla - würde man i.d.R. ein Chaos vorfinden.
Und wie seht IHR das???
Ansonsten genauso (auch was Svens Anmerkung bezüglich der Smileys angeht ...).
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Tag zusammen!
grins
Fast kein Tag vergeht, wo hier im Forum nicht Fragen a là "Der IE stellt meine CSS Angaben nicht so dar, wie ich will" oder "Wieso macht Opera oder Mozilla dieses und jenes nicht" etc. gestellt werden.
Kontrollwahn global..... nun neu auch in html css.....
Die verschiedenen Darstellungen ein und der selben Seite durch unterschiedliche Browser haben sicher fast schon jeden hier in den Wahnsinn getrieben. An der Problematik an sich kann man nichts ändern - also muß man sich überlegen, wie man trotzdem halbwegs nervenschonend zur fertigen Seite kommt.
a) kein css verwenden
b) Nicht zu viel Kaffee trinkenIch habe oft das Gefühl, viele Leute schreiben zunächst mal eine ganze Seite und machen nur - wenn überhaupt - gelegentlich Zwischenkontrollen. Und das oft nur mit einem Browser. Irgendwann ist die Seite dann fertig. Eine Seite mit vielen divs, die per CSS alle unterschiedlich mit margin, padding, float, etc. formatiert sind - oft noch ineinander verschachtelt.
Tja das rekursive Rähmchen letztlich ziemlich viel Rechenleistung brauchen, ist an und für sich kein Browserproblem, sondern das Problem von überformatierten Seiten.
Wenn sich die Schreiber der Seite dann das Ergebnis in den unterschiedlichsten Browsern ansehen, sind sie schockiert, wie unterschiedlich das Ergebnis ist.
Warum soll ich mir das in unterschiedlichen Browsern ansehen?
Ich schreibe mit Mitteln von denen klar ist wie sie angezeigt werden, und mache mich im Detail nicht davon abhängig.Und dann machen sie den fatalen Fehler. Sie nehmen eines der divs mitten aus der Seite und ändern oder erweitern die CSS Angaben dafür. Sie basteln und spielen herum, bis dieses div in allen Browsern so dargestellt wird, wie sie es erwarten. Da aber viele div-Bereiche verschachtelt sind oder durch die CSS-Formatierung im Zusammenhang stehen, bewirkt das dann, daß jetzt andere Teile der Seite plötzlich im einen oder anderen Browser völlig skurril ausgegeben werden. Dann basteln sie an diesem Problem.
Wurde css nicht dafür erfunden dass die einen schreiben und die anderen basteln dürfen und sich beide nicht unnötig in die Quere kommen?
Es entsteht ein nie enden wollender Teufelskreis mit dem Ergebnis, daß es der Autor der Seite entweder aufgibt, hier um Hilfe schreit oder einfach auf ein Tabellenlayout zurückgeht.
Oder es weit voraus ahnend gar nie verlassen hat. Warum man ihn zwar böse nennt, aber insgeheim doch um seine Inhalte beneidet.
Um jedoch gar nicht soweit zu kommen, habe ich mir angewöhnt, jedes mal, wenn ich eine Seite erstelle, den selben Weg zu gehen: Das Prinzip dabei ist, von außen nach innen zu gehen und jeden neuen Berich der Seite erst zu beginnen, wenn das bisher Geschriebene in allen Browsern zufriedenstellend dargestelt wird. Das heißt, ich definiere z.B. zunächst mal ein div für den Hintergrund. Dann kommt der Check mit IE, Navigator, Mozilla, Firefox und Opera. Wird dieser soeben geschriebene Bereich der Seite in allen Browsern gleich dargestellt, folgt noch die Kontrolle durch den Validator, ob das html bis dato korrekt ist.
Vielleicht stösst man derart irgend wann einmal auf den Inhalt vor, fall man bis dann nciht eigentlch vergessen hat, was man eigentlich mal schreiben wollte.
Vielleicht hat man sich aber dabei bereits eine so bunte Kiste gemalt, dass man nun den Inhalt gänzlich in die Förmchen quetschen muss, um damit Design Kekse herzustellen.Und erst, wenn BEIDE Konrollen OK sind, folgt das nächste div. Z.B. der Hauptanzeigeberich, in dem später Bilder, Text und Tabellen sind. Dabei empfiehlt es sich, auch divs, die nur dazu da sind, um Bilder, Text oder Tabellen zu beherbergen und keine Farbe oder Rand haben, zunächst mit einer auffälligen Farbe zu formatieren. Das selbe Prinzip gilt auch für Absätze.
Ach, bei dir gibt es sogar Absätze? Gibts auch Überschriften, oder sind die bereits zu trivial?
Ich färbe z.B. ein div pink ein und schreib da einen Test-Absatz hinein, der einen knallgelben Hintergrund bekommt. Nur JETZT kann ich in allen Browsern kontrollieren - sind die divs in allen Browsern gleich breit, hat der Absatz in allen Browsern die gleichen Abstände zum div, hat der Text in allen Browsern den gleichen Abstand zum Rand des Absatzes, u.s.w.
Methode in Ehre aber ich wollte eigentlich etwas anderes schreiben als THE QUICK BROWN FOX JUMPS OVER....
Tritt hier ein Problem auf und ein Absatz klebt z.B. im Opera am Rand, soll dies aber nicht tun, dann kann ich JETZT mit margin, padding, ... herumspielen, bis das Problem behoben ist. Erst, wenn das Ergebnis in allen 4 Browsern gleich ist, nehme ich die häßlichen Farbfüllungen weg, validiere wieder und es kommt das nächste div, die nächste Tabelle, der nächste Absatz, etc.
Ich überege mir, wie ich dieses Verfahren auf die Verständlichket von Inhalten anwende.
Also ich schreibe einen Titel und frage jeden der 6 Millarden zweibeinigen Alphamehroderweniger. Und wenn dann die die Abstimmung ein eindeutiges ja ergibt.....Und so geht das immer weiter, bis die Seite fertig ist. Man mag dem jetzt entgegenhalten, daß diese Art mühsam, kompliziert, unnötig oder was auch immer ist. Ich kann aus Erfahrung nur sagen - wenn man seine Seiten immer in diesem Step-by-Step + Browserkontrolle - System schreibt, kommt es NIE dazu, daß man irgendwann vor dem Problem steht, einene Darstellungsfehler zu beheben und damit den nächsten Darstellungsfehler auszulösen. Im Endeffekt ist man somit oft schneller - in jedem Fall aber nervenschonender - mit seiner Seite fertig, als würde man zuerst alles schreiben und dann erst anfangen, die Darstellungsfehler auszumärzen.
Das klingt eher nach platonischer Verhinderungsstrategie aus pseudo-html-aktivistischem Narzismus.
Da bin ich Machiavellist. Ich schreibe auf Netscape Composer und zwischendurch auf der Frontalseite und klau mir ein Bild html 4.01 validiert, und auf allen Browsern optimiert.Daß viele es nicht so tun, kann man daraus schön sehen, daß bei den Darstellungsproblemen, die hier oft beschrieben werden, das eigentliche Problem gar nicht in der Formatierung des Bereiches liegt, der falsch dargestellt wird, sondern durch die CSS-Angaben eines ganz anderen Elements, welches direkt daneben liegt oder das Elternelement ist.
Wenn man css Dateien einbindet, erübrigt sich spätesten beim Offline Lesen diese Diskussion.
Conclusio : Ich kann daher allen Anfängern und Leuten, die sich mit den browserunterschiedlichen Darstellungsformen immer wieder herumärgern, den oben beschrieben Weg wärmstens empfehlen. Seit ich so arbeite habe ich bis jetzt noch jede Seite für alle Browser fast ident hinbekommen und mir stundenlange Fehlersuche gespart.
Wer sich zum Thema Layout ärgert, ärgert sich zurecht als Ersatzhandlung für fehlende Inhalte.
Außerdem hat dieser Weg auch den Vorteil, daß, wenn man mal vor einem Problem steht, dies dann zu diesem Zeitpunkt das einzige Darstellungsproblem ist und sich eine Hilfestellung wie z.B. hier im Forum einfacher und schneller bewerkstelligen läßt.
Zum Beispiel mit vorbereiteten FAQ's, natürlich mit dem obligaten Statement _ich verwende die Parkbank Methode 1.0_
Und wie seht IHR das???
gar nicht, oder müsste ich jetzt zu pinkfarbenen Div-Containern Stellung nehmen?
Liebe Grüße
parkbanksitzerEigentlich schade, dass hier html nicht interpretiert wird, sonst hätten wir sicher einen Thread, step by step, der uns vordemonstriert, wie du zuletzt an den Inhalt ran kommst.
Sorry, Diskussionen über Html Design riechen immer nach maximaler Ineffizienz.
PS.... wenn's mir dann doch mal um Design geht, klatsch ich ein Jepg an die Wand.grins Beat
-
Hallo,
Und wie seht IHR das???
ganz genauso. Da mag ich nichts hinzufügen. Toller Beitrag!
Gruß,
_Dirk, ähnlich vorgeht, jedoch nicht allzu konsequent testet und validiert -
Hi,
ich finde, daß Du Dir das Leben unnötig schwer machst. Zum einen reicht es meist aus, eine Seite bei der Erstellung im Mozilla zu kontrollieren und - wenn sie fertig ist - zu überprüfen, was Opera davon hält und wenn der nichts auszusetzen hat, kommen evtl. die kleinen Korrekturen für den IE.
Aus dem, was Du hier gesvhrieben hast, z.B.:
Eine Seite mit vielen divs, die per CSS alle unterschiedlich mit margin, padding, float, etc. formatiert sind - oft noch ineinander verschachtelt.
Dabei empfiehlt es sich, auch divs, die nur dazu da sind, um Bilder, Text oder Tabellen zu beherbergen und keine Farbe oder Rand haben
schließe ich, daß Du einen gänzlich anderen Weg gehst, als ich ihn empfehlen würde, und dadurch erst die Probleme (und damit die Kontrollen zur Problemlösung) selbst verursachst.
Ich erstelle zunächst einen mit sinnvollen XHTML-Elementen ausgezeichneten Inhalt, wobei ich mir überflüssige DIVs einfach spare und mir zu diesem Zeitpunkt auch meist nur wenig Gedanken über das Layout mache. Dieses layoutlose Seite betrachte ich mir in einem xbeliebigen Browser und schaue, ob sie auch ohne CSS gut strukturiert, übersichtlich und lesbar ist.
Erst wenn das XHTML steht, kommt das Layout über CSS. Mein Vorteil gegenüber Deinen Seiten dürfte sein, daß ich- wesentlich weniger Elemente zu formatieren habe und dadurch auch weniger Abhängigkeiten bestehen und
- am XHTML nicht mehr viel herumgedoktert werden muß (höchstens mal einen Hilfscontainer für bestimmte Aufgaben anlegen) - das ist ja bereits optiomal.
Glaube mir: auf diese Weise geht's wirklich schneller und nervenschonender und nebenbei ist die Seite meist schon barrierefrei.
freundliche Grüße
Ingo