Mein Webseite und mein Blog waren bis gestern als Tabellenlösung layoutet. Bekanntlich ist das Konstruieren dieser Seiten nicht schön. Und Inhalt und Layout werden auch ordentlich durcheinander gebracht.
Anläßlich eines Layout-Relaunches beschloss ich also, mich mal näher mit CSS zu beschäftigen. Bis dato nutzte ich CSS nur, um Schriftfarben und -größen
festzulegen.
Zunächst versuchte ich, entsprechend der gedachten Tabellen-Zellen, das Layout spaltenweise wieder aufzubauen. Es brauchte ungefähr einen halben Tag, bis ich realisierte, dass ich ja gerade von
den Tabellen-Zellen weg wollte. Um eine Seite mit CSS zu gestalten, muss man sich fragen, welcher Inhalt in welcher Form wo platziert werden soll.
Daher versuchte ich nun, entsprechend farbige Boxen auf der Webseite zu platzieren. Nachdem ich auf den W3-Seiten (hier) ziemlich schnell
an mein bzw. an das Darstellungsende des MSIE gelangt war, suchte ich weiter:
- SELFhtml: Spaltenlayout CSS
- Floats vs. Layouttabellen
- ...und mehrere Kommentare dazu
-
Einschließen von Floats ohne zusätzliches Markup
Und damit begannen die Probleme: während der Firefox sich geschmeidig anstellte, wollte der MSIE dann meist überhaupt nicht. Leise erinnerte mich das Vorgehen von Tabellen: während man dort mit
viel Space-Grafiken und Verschachtelungen arbeitet, müssen im Floats-CSS-Spaltenlayout diverse Container ineinander verschachtelt werden.
Aber es wurde dann doch. Mit einem Trick, der offensichtlich häufig genutzt wird, und der das eigentliche Anliegen nicht gut bedient: alle Layout-Boxen habe ich nun absolut positioniert. Und
somit ist das Layout nun fertig;-)
Ein bißchen JavaScript war noch vonnöten, um auch den MSIE davon zu überzeugen, dass bestimmte Balken immer über die ganze Höhe, der Textinhalt aber auch manchmal umgebrochen zu
sehen ist. Die Funktion ist nicht schön, und bei document.onresize tut sich nichts.
Beim nächsten Layout-Relaunch werde ich das ändern. Das sind die Browser dieser Welt sich hoffentlich einig, wie Standards zu interpretieren sind.