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

17.3.2 Das CSS für die doppelten divs

Im CSS benutzen Sie das jeweils äußere Element für die Angabe der Breite und das jeweils innere Element für padding und border.

Da bei einer flexiblen Breite für den Navigationsbereich eine Hintergrundgrafik mit fester Pixelbreite nicht geeignet ist, bauen Sie im folgenden ToDo zunächst wieder farbverlauf.jpg für den Wrapper ein.

ToDo: Zweispaltiges flexibles Layout
  1. Öffnen Sie das Stylesheet bildschirm.css in einem Editor.
  2. Ändern Sie den Hintergrund für #wrapper wie folgt:

    #wrapper {
      background: #ffe574 url(farbverlauf.jpg) repeat-y left top;
      color: black;
      width: 80%; /* Breite in Prozent */
      min-width: 720px; /* Minimale Breite in px */
      max-width: 80em; /* Maximale Breite in em */
      margin: 10px auto;
    }

  3. Ändern Sie als Nächstes das Styling für den Navigationsbereich:

    #navibereich {
      float: left;
      width: 20%;
      /* padding verschoben zu #navibereich_innen */
    }
    #navibereich_innen {
      padding-left: 20px;
      padding-top: 20px;
    }

  4. Ändern Sie jetzt noch das Styling für den Textbereich:

    #textbereich {
      background-color: white;
      /* padding verschoben zu #textbereich_innen */
      margin-left: 20%; /* Platz für #navibereich */
    }
    #textbereich_innen {
      padding: 20px 10px 20px 20px;
    }

  5. Speichern Sie die Webseiten und betrachten Sie sie im Browser.

Und so sieht die flexible Seite im Browser aus:

Abbildung 17.10: Navigationsbereich mit 20% Breite
Abbildung 17.10: Navigationsbereich mit 20% Breite

Wirklich wichtig sind im CSS bei diesem Beispiel zwei Dinge:

  • width für #navibereich muss denselben Wert haben wie margin-left für #textbereich.
  • padding und border werden nur für die beiden inneren div-Elemente vergeben.