Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

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:

Beispielseiten

Inhaltsbereich

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
Abbildung 16.1: Das fertige zweispaltige Layout

Das Layout wird in sieben Schritten erstellt:

  1. Floaten des Navigationsbereichs
  2. Textbereich mit einem großen linken Rand versehen
  3. Vorbereitung der ungeordneten Liste
  4. Gestaltung der Hyperlinks in der Liste
  5. Aktuellen Navigationspunkt hervorheben
  6. Hintergrundfarbe für die Navigation
  7. 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.