Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
Webseiten gestalten mit HTML und CSS (anno 2009)
16.1 Zweispaltiges Layout mit float und margin
Mit float können Sie nicht nur Grafiken schweben lassen, sondern auch ganze div-Bereiche, und das HTML bleibt, wie es ist.
In diesem Abschnitt erstellen Sie ein einfaches zweispaltiges Layout mit einer senkrechten Navigation auf der linken Seite, das im Browser wie folgt aussieht:
Abbildung 16.1: Das fertige zweispaltige Layout
Das Layout wird in sieben Schritten erstellt:
- Floaten des Navigationsbereichs
- Textbereich mit einem großen linken Rand versehen
- Vorbereitung der ungeordneten Liste
- Gestaltung der Hyperlinks in der Liste
- Aktuellen Navigationspunkt hervorheben
- Hintergrundfarbe für die Navigation
- Clearen des Fußbereichs
Denken Sie daran, dass per float positionierte Elemente beim Layouten fast immer eine mit width deklarierte Breite haben. Ohne Breitenangabe wird die Breite gefloateter Elemente unberechenbar, denn sie schrumpfen und werden nur so groß wie ihr Inhalt.