Tabellen raus, CSS-Layer rein

12.01.2004 Ich hatte mir für diese Site schon längere Zeit vorgenommen, die blinden Tabellen durch <div>-Layer zu ersetzen. Nun habe ich erstmal diese Testseite entworfen, was gar nicht so einfach war, da ich mir selbst im vorhinein einige Vorgaben gemacht habe:

1. das Test-Layout sollte dem bisherigen Design so weit wie möglich ähneln

2. meine Test-Browser, Internet Explorer 6, Mozilla 1.4 und Opera 7.2, sollten weitgehend ähnliche Resultate anzeigen. Netscape 4 habe ich das Layout vorenthalten (siehe hierzu auch Netscape 4 und CSS (II) unter Punkt 4.)

3. wie bisher sollte die Seite eine flexible Breite ausfweisen, so dass sie sich verschiedenen Bildschirmauflösungen und Fenstergrößen anpasst.

4. dies wollte ich durch einfache Lösungen erreichen, der Quelltext sollte schön schlank sein, und nicht überladen durch zahlreiche Workarounds.

Es hat lange gedauert, bis ich die Testseite soweit erstellt hatte, dass sie diesen Anforderungen einigermaßen entsprach, ich musste dabei einige Abstriche machen. So hat die rechte Navigationsleiste nun keine feste Breite mehr, bei größeren Bildschirmauflösungen wirkt sie im Verhältnis zu den enthaltenen Links überdimensioniert, andere Lösungen wollten mir nicht recht gelingen, oder waren nicht zufriedenstellend (weil z.b. ein größerer Rand rechts von der Navigationsleiste übrigblieb). Allerdings stehe ich, was das Arbeiten mit CSS-Layern anbelangt, wohl auch erst am Anfang - ich muss quasi wieder bei null anfangen, nachdem ich die Seitenelemente bis dato mittels blinder Tabellen positioniert habe. Zudem ist mir bewusst geworden, dass die Stärke von Layern wohl auch eher in der Möglichkeit ihrer freien Positionierung liegt, und nicht im Nachbauen eines Tabellenlayouts.

Eine weitere Anforderung, die ich mir während des Erstellens zusätzlich noch stellte, war das Fixieren der Navigationsleiste für Mozilla und Opera (sowie andere moderne Browser). Für den Internet Explorer, der mit position:fixed nichts anfangen kann, war ein kleiner Workaround notwendig. Da er mir die Navigationsleiste auf die linke Seite verschoben hätte, sobald ich sie nicht mehr mit position:absolute definiert hätte, habe ich dieser das Attribut position:fixed nachträglich zugewiesen:

div.navi { position:absolute; left:81%; top:10px; width:18%; padding:0; margin-left:3px; font-weight:bold; line-height:90%; text-align:center; }

body>.navi { position:fixed; overflow:auto; }

Dem Internet Explorer ist der Selektor > unbekannt, so dass er die zweite Angabe ignoriert, während Opera und Mozilla durch sie veranlasst werden, die Navigationsleiste zu fixieren. [Es gibt auch einen Workaround, der einen Bug des Internet Explorers ausnutzt, und auf diese Weise auch für diesen einen Layer fixiert: Position: fixed (fast) alle Browser? Es geht doch ! von Fabrice Pascal. Da ich eine einfache und valide Lösung angestrebt habe, habe ich dieses Verfahren für die Testseite nicht angewandt.]

Es wird noch etwas dauern, bis ich mich entschließe, ob ich die gesamte Site nun nach dem Muster der Testseite umbaue. Falls diese in von mir nicht getesteten Browsern und Bildschirmauflösungen völlig unansehlich erscheint, kann man mir derweil gerne die Screenshots um die Ohren hauen ;).

Weitere Webnotizen zum Thema: Der Internet Explorer und CSS und Webnotizen Layout überarbeitet