Direktnavigation
Weitere Infos
Sie lesen:
LB Teil 1 (2009)
Der Nachfolger:
Einstieg in CSS
WordPress
3. Auflage
Webseiten gestalten mit HTML und CSS
7.6 Ein bisschen Abstand drum herum: padding
Ein Problem beim Gestalten mit CSS ist, dass man manchmal nicht genau weiß, welcher Box man welche Eigenschaft zuweisen muss, um einen gewünschten Effekt zu erreichen.
Um zwischen Text und dem Rand von div#wrapper ein kleines Polster zu erzeugen, läge es nahe, div#wrapper ein padding von zum Beispiel 20 Pixel zu geben.
Diese Maßnahme hat allerdings nicht wirklich den gewünschten Effekt, denn dadurch bekommt auch der Kopfbereich einen weißen Abstand drum herum:
Abbildung 7.6: #wrapper mit 20px padding – nicht wirklich gelungen
Eine bessere Lösung ist in diesem Fall, für die div-Bereiche jeweils ein individuelles padding zu definieren.
ToDo: Einen Innenabstand für die div-Bereiche definieren
- Ergänzen Sie das Stylesheet um die hervorgehobenen Zeilen:
div#kopfbereich {
color: black;
background-color: #f3c600;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
}
div#navibereich {
padding-top: 5px ;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
}
div#textbereich {
padding-top: 20px ;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
}
div#fussbereich {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border-top: 1px solid #8c8c8c;
margin-top: 0;
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
Browser.
Alle drei Bereiche haben ein leicht unterschiedliches padding bekommen, und insgesamt sieht das Ergebnis schon ganz brauchbar aus.
Abbildung 7.7: Startseite mit padding für die div-Bereiche
Kurzschreibweise für padding und margin
Bei der Definition des padding für die div-Bereiche haben Sie alle vier Seiten einzeln geschrieben. Das ist zwar sehr anschaulich, aber auf Dauer sehr viel Getippe. Im Kapitel über »Ordnung halten im CSS« lernen Sie diverse Kurzschreibweisen für padding und margin kennen.