Die Mischung aus absoluter Positionierung und Beibehaltung der Adaptionsfähigkeit an die Browserfähigkeit ist faszinierend. Das ganze Layout zeigt was man grundsätzlich mit CSS rausholen kann und wieviel Feintuning man betreiben kann.
Es handelt sich prinzipiell um ein einfaches Layout: Kopfbanner und darunter drei Spalten. Dieses Layout läßt sich überraschend einfach in CSS umsetzen.
Das komplette Layout wird erstmal mit position: relative; width: 732px; margin 0 auto;
oben bündig und horizontal zentriert. Das sorgt grosso modo für die Positionierung des Kopfbanners. "Hinter" dem Kopfbanner wird ein Hintergrundmuster angewendet (auf BODY
angewandt, links oben startend, nur nach rechts gekachelt).
Die beiden äußeren Spalten werden absolut positioniert. Die Position definiert sich dabei durch die fixe Höhe des Kopfbanners (top: 304px
) und wird, je nach Spalte, links- oder rechtsbündig an den Browserrand gelegt (left: 0px
bzw. right: 0px;
). Auch die Spaltenbreite ist mit width: 180px;
festgelegt.
Die mittlere Spalte "quetscht" sich zwischen den äußeren Spalten. Mit margin: 0 200px;
wird jeweils 200px Luft nach links und rechts gelassen, genügend also für die beiden äußeren Spalten. Die Breite ist durch 738 - 200 - 200 = 338px festgelegt (Breite des #container
minus Spalte links und rechts.)
Eigentlich ein verblüffend einfacher Grundaufbau.
Nachtrag: ich finde es interessant, dass Bowman die vermutlich problematischste CSS-Eigenschaft umschifft: die relative Höhe. Probleme würde er z.B. bekommen wenn er ein Hintergrundmuster oder Farbe auf die volle Höhe einer Spalte anwenden müsste. Dies ist per CSS-Definition nicht möglich (at least bis inkl. CSS2.1), da es keine Property gibt die die Browser-Höhe oder Seitenhöhe als Maßstab nehmen kann (wir reden hier über W3C-konformen, strict Code!).
Die einzige Möglichkeit die ich für einen Workaround sehe, wäre das Anwenden einer Hintergrundgrafik auf BODY
(und/oder HTML
?) die mit repeat-y
die ganze Seite runtergekachelt wird.
Diesen Workaround gibt es z.B. bei dogfood zu "bewundern". Die gepixelte Hintergrundgrafik der Navigationsspalte wird in Wahrheit auf die ganze Seite angewendet, nur durch die Hintergrundfarbe der Inhaltsspalte überdeckt. Ein zugegebenermaßen sehr hölzerner Weg. Wenn ich mich richtig entsinne hat damals das positionieren der Hintergrundgrafik via background-position
irgendwo nicht geklappt.
[19h49] Software_MacOS X -- Laut
MacUser UK gibt es nun das
erste offizielle Statement aus der MacBU von Microsoft bzgl. der Zukunft des Mac Internet Explorers. Kurzfassung: keine.
Die Begründung ist so lahm, das sich Microsoft damit endgültig als "Innovator" verabschiedet: einige Kundenwünsche würden eine derart enge Verzahnung von Browser und OS verlangen, dass eine Browser-Weiterentwicklung nur noch durch Apple möglich ist.
Diese Begründung ist natürlich Unsinn, denn es wird ja z.B. sogar eine eigene Rendering-Engine weiterentwickelt (für den MSN-Explorer) was angesichts Apples fast fertigem Web-Framework nun wirklich nicht Not täte. Und Omni-Groups
OmniWeb zeigt ja wie schnell man eine Alternative basierend auf dem Framework hochziehen kann.
Update: Nun auch ein Microsoft-Statement auf der
IE-Mailingliste von Jimmy Grewal
Though we continue to work on updates for Mac IE 5.x, there will be no IE 6 for the Mac. This was s difficult decision, but clearly the right one for our business and our customers.