Webnotizen Layout überarbeitet

10.09.2004 Nach der Umstellung der Notizen auf ein neues Script habe ich jetzt auch ein paar kleine Korrekturen am Layout vorgenommen, welches ich vor acht Monaten erstellt hatte (siehe Webnotizen Tabellen raus, CSS-Layer rein).

Damals hatte ich es auch nach einigem Probieren nicht hinbekommen, dass die Navigation auf der rechten Seite eine feste Breite erhält. Das Grundproblem war, dass ich bei einem dreispaltigen Aufbau wie auf der Startseite den Inhalt der mittleren Spalte im Quelltext an erster Stelle platzieren wollte - dies schien mir durchaus folgerichtig, da dieser Teil dem Betrachter wohl auch als erstes ins Auge springt. Der mittlere Layer, der im Quelltext an oberster Stelle stand, erhielt ein float:right. Das funktionierte auch soweit bei den gängigen Browsern, nur der Internet Explorer 5 wollte die Layer nicht passend anordnen. Erst als ich die Layer mit position:absolute nebeneinander platzierte und die Gesamt-Breite auf sie prozentual aufteilte, zeigte auch der IE 5 die Seite korrekt an.

Die absolute Positionierung hatte noch den Nachteil, dass ich bei der Titelleiste auch mit einer fixen Höhe arbeiten musste. Nachteil deshalb, weil bei einer Vergrößerung der Schriftgröße im Browser die den Text umfassende Box gleich groß blieb. Mir fiel das allerdings auch erst später auf, weil mein Erst-Browser Opera alle Elemente einer Seite (so z.B. auch Bilder) gleichermaßen zoomte - im Gegensatz zum Internet Explorer oder Mozilla, die nur die Schriftgröße änderten, wie der folgende Screenshot zeigt (Mozilla Zoom auf 200%):

ebnotizen Titelleiste in Mozilla bei Vergrößerung auf 200%

Um den IE 5 ohne absolute Positionierung zu einer korrekten Anzeige zu bewegen, habe ich auch diesmal keinen anderen Weg gefunden, als den linken Layer im Quelltext nun doch an erster Stelle zu setzen. Dafür hat die Navigation jetzt eine feste Breite und die Titelleiste eine flexible Höhe, die beim Zoomen "mitwächst".