Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

Schritt 6: »Falsche Spalte« – Hintergrundfarbe für die Navigation

Im ersten Schritt haben Sie gesehen, dass die Navigationsspalte eigentlich gar keine Spalte ist, denn der Navigationsbereich ist immer nur so hoch wie sein Inhalt.

Wenn Sie #navibereich eine Hintergrundfarbe zuweisen, wird das mehr als deutlich:

Abbildung 16.7: Spalte? Naja...
Abbildung 16.7: Spalte? Naja...

Der zuverlässigste Weg zur Einfärbung der gesamten Spalte bis hinunter zum Fußbereich ist die Verwendung einer farbigen Hintergrundgrafik. Diese Grafik wird einem Element zugewiesen, das immer bis zum Fußbereich reicht, zum Beispiel #wrapper. Dan Cederholm hat diese Technik »faux column« (»falsche Spalte«) getauft.

Für das folgende ToDo benötigen Sie eine farbige Grafik, die so breit ist, wie der Navigationsbereich erscheinen soll. 130 x 5 Pixel wären im Beispiel eine gute Größe. Dazu habe ich eine Kopie von farbverlauf.jpg mit dem Namen farbverlauf_zweispaltig.jpg erstellt und diese mit einem Bildbearbeitungsprogramm auf 130 Pixel verkürzt.

Damit der Fußbereich nicht auch farbig hinterlegt wird, weisen Sie ihm explizit die Hintergrundfarbe Weiß zu.

ToDo: Eine Hintergrundfarbe für die Navigationsspalte
  1. Ergänzen Sie die vorhandene Regel für #wrapper wie folgt:

    #wrapper {
      color: black;
      background: white url(farbverlauf_zweispaltig.jpg) repeat-y left top;
      width: 720px;
      margin: 10px auto;
    }

  2. Geben Sie dem Fußbereich eine weiße Hintergrundfarbe:

    #fussbereich {
      color: black;
      background-color: white; /* Deckweiß */
      padding: 10px 20px 20px 20px;
      border-top: 1px solid #8c8c8c;
      margin-top: 0
    }

  3. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

Und fertig ist das zweispaltige Layout auf der Basis von float und margin. Na ja, fast fertig jedenfalls:

Abbildung 16.8: Das zweispaltige Layout mit float und margin
Abbildung 16.8: Das zweispaltige Layout mit float und margin
Einfache Farbe statt spezieller Grafik für den Hintergrund?

Statt der speziell zugeschnittenen, 130px breiten Grafik könnten Sie für die Einfärbung der Navigationsspalte auch einfach nur eine Farbe oder die Grafik farbverlauf.jpg aus dem Kopfbereich nehmen. In beiden Fällen ist der Wrapper durchgehend farbig, und Sie müssen dem Textbereich eine weiße Hintergrundfarbe geben.

Auf den ersten Blick sieht das Layout genauso aus wie im Beispiel. Potenzieller Nachteil: Sollte der Textbereich kürzer sein als der Navibereich, erscheint unten zwischen Textbereich und Fußbereich der Wrapper, und der ist dann durchgehend farbig ...