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.2 Dreispaltiges Layout mit float und margin

Das eben erstellte zweispaltige Layout lässt sich relativ leicht in ein dreispaltiges verändern, das dann wie folgt aussehen könnte:

Abbildung 16.9: Ein dreispaltiges Layout mit float und margin
Abbildung 16.9: Ein dreispaltiges Layout mit float und margin

Das HTML für die dritte Spalte

Im HTML benötigen Sie dazu eine dritte Spalte, die im Quelltext vor dem Textbereich stehen muss:

ToDo: Einen zusätzlichen div-Bereich im HTML einfügen
  1. Fügen Sie in allen drei HTML-Dateien zwischen #navibereich und #textbereich den folgenden div-Bereich ein:

    ...
    </div> <!-- Ende navibereich -->

    <div id="sidebar">
    <h2>#sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Suspendisse egestas ultricies pede.</p>
    </div>

    <div id="textbereich">
    ...

  2. Speichern Sie die drei Webseiten und betrachten Sie sie im Browser.
Nach oben

Die Anpassungen im CSS

Die im HTML neu erzeugte Spalte wird mit einem neuen Style und einem rechten Außenrand für #textbereich in das vorhandene Layout eingefügt.

Die Hintergrundfarbe bekommt #sidebar von #wrapper und wäre deshalb eigentlich Weiß. Eine eigene Farbe kann die Spalte nicht so ohne Weiteres bekommen, da kein HTML-Element vorhanden ist, an das man die »falsche Spalte« aufhängen könnte.

Um der dritten Spalte trotzdem einen farbigen Hintergrund zu geben, benötigen Sie eine neue Hintergrundgrafik:

Abbildung 16.10: Hintergrundgrafik für ein dreispaltiges Layout
Abbildung 16.10: Hintergrundgrafik für ein dreispaltiges Layout

Diese Grafik ist 720px breit, links 130px farbig, in der Mitte 460px weiß und rechts 130px farbig. Am einfachsten erstellen Sie dazu eine Kopie von farbverlauf.jpg und färben den mittleren Bereich weiß. Sie können natürlich auch einfach farbverlauf_dreispaltig.jpg aus dem Basisordner in den Übungsordner kopieren.

ToDo: Die dritte Spalte im CSS gestalten
  1. Ändern Sie in bildschirm.css den Style für #wrapper:
    #wrapper {
      color: black;
      background: white url(farbverlauf_dreispaltig.jpg) repeat-y left top;
      width: 720px;
      margin: 10px auto;
    }
  2. Fügen Sie nach den Styles für den #navibereich einen Style für #sidebar ein:
    #sidebar {
      float: right;
      width: 110px;
      padding: 10px;
      padding-top: 20px;
    }
  3. Ändern Sie den Style für #textbereich wie folgt:
    #textbereich {
      padding: 20px 10px 20px 20px;
      margin-left: 130px;
      margin-right: 130px;
    }
  4. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

Im ersten Style weisen Sie #wrapper die neue Hintergrundgrafik zu, im zweiten wird die dritte Spalte mit einer Breite von 110px nach rechts gefloatet. Dazu kommen noch die 2 x 10px padding rechts und links, sodass die Spalte genau in 130px margin-right passt.

Das Ergebnis ist optisch ein dreispaltiges Layout. Bemerkenswert ist dabei die unterschiedliche Reihenfolge der drei Spalten im Quelltext und am Bildschirm:

  • Am Bildschirm ist die Reihenfolge #navibereich – #textbereich – #sidebar, also 1–2–3.
  • Im Quelltext hingegen ist die Reihenfolge #navibereich – #sidebar – #textbereich, also 1–3–2.
Tutorial bei The Styleworks

Auch für floatbasierte Layouts gibt es bei The Styleworks ein deutschsprachiges Tutorial:

Nach oben