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:
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
- Öffnen Sie das Stylesheet bildschirm.css in einem Editor.
- Ä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;
} - Ä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;
} - Ä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;
} - Speichern Sie die Webseiten und betrachten Sie sie im Browser.
Und so sieht die flexible Seite im Browser aus:
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.
