Direktnavigation
Weitere Infos
Sie lesen:
LB Teil 1 (2009)

Der Nachfolger:
Einstieg in CSS
WordPress
2. Auflage
Sie lesen:
LB Teil 1 (2009)
Der Nachfolger:
Einstieg in CSS
WordPress
2. Auflage
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:
Eine bessere Lösung ist in diesem Fall, für die div-Bereiche jeweils ein individuelles padding zu definieren.
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;
}
Alle drei Bereiche haben ein leicht unterschiedliches padding bekommen, und insgesamt sieht das Ergebnis schon ganz brauchbar aus.
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.