Flexible Rahmen mit CSS2

Zuerst werde ich den Header-Bereich erstellen. Der entsprechende Code findet sich in Listing A (aus Demonstrationszwecken ist das Stylesheet in den HTML-Code eingebettet).

Dieser Code erzeugt einen 75 Pixel hohen hellblauen Bereich mit einem 1 Pixel breiten schwarzen Rand an allen vier Seiten. Um die Kompatibilität mit den drei wichtigsten Browsern zu gewährleisten und dafür zu sorgen, dass das Layout das gesamte Browserfenster ausfüllt, habe ich die Breite des Kopfbereichs nicht mit dem width-Attribut festgelegt.

Als nächstes kommt der Bereich für die obere Navigation (Topnav). Um diesen Bereich zu erstellen, wird der Code wie in Listing B ergänzt.

Nun befindet sich direkt unter dem Header ein dunkelblauer Bereich, der an drei Seiten einen 1 Pixel breiten schwarzen Rand hat. Auf den oberen Rand habe ich verzichtet, da ich den unteren Rand des Headers zur Abgrenzung der beiden Bereiche verwende. Genau wie beim Header gebe ich auch hier keine Breite mit dem width-Attribut an.

Als nächstes füge ich die linke Menüleiste (Leftnav) hinzu, so dass der Code jetzt wie in Listing C aussieht.

Nun gibt es eine 200 Pixel breite und 450 Pixel hohe graue Leiste links auf der Seite. Sie hat links und rechts einen 1 Pixel breiten schwarzen Rand, nicht aber oben und unten. Stattdessen werden der untere Rand der oberen Menüleiste und der Footer verwendet. Beachten Sie, dass die linke Menüleiste das float-Attribut verwendet. Indem das float-Attribut auf „left“ gesetzt wird, befindet sich die linke Navigation immer links vom nachfolgenden Element, in diesem Fall links vom body-Element.

Nach dem Hinzufügen des body-Elements sieht der Code aus wie in Listing D.

Der Body-Bereich ist 450 Pixel hoch, mit einem 1 Pixel breiten schwarzen Rand auf der rechten Seite. Der Body verwendet den unteren Rand der oberen Menüleiste, den rechten Rand der linken Menüleiste und den Footer, so dass es aussieht, als ob ein 1 Pixel breiter Rand an allen Seiten wäre. Ebenso wie beim Header und der oberen Menüleiste verwende ich auch beim Body kein width-Attribut.

Der letzte Bereich bei diesem Layout ist der Footer. Um diesen zu erstellen, ergänze ich den Code wie in Listing E.

Zum Footer sind zwei Dinge anzumerken: Erstens wird kein border-Attribut verwendet. Da der Footer wie die Ränder aller anderen Elemente schwarz ist, ergibt sich die Illusion eines schwarzen Randes um den Footer. Zweitens verwende ich das clear-Attribut. Wenn das clear-Attribut auf „none“ gesetzt wird, wirkt sich die relative Positionierung der anderen Elemente nicht auf den Footer aus. Wenn das Body-Element z. B. „float:left“ verwendet hätte (wodurch der Footer rechts vom Body positioniert wäre), würde die Anweisung „clear:both“ im Footer das float-Attribut außer Kraft setzen und den Footer unten platzieren, wo er hin gehört.