Operation Manual

167
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Die folgende CSS-Regel, die sich im Head-Bereich des Dokuments oder in einer externen CSS-Datei befinden kann,
erstellt Stilregeln für das erste Div-Tag, d. h. das „Container“-Tag, auf der Seite:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
Die #container-Regel bewirkt, dass das Div-Tag „container“ eine Breite von 780 Pixel, einen weißen Hintergrund,
keinen Rand (am linken Rand der Seite) und einen schwarzen, 1 Pixel starken Rahmen besitzt und dass der Text links
ausgerichtet ist. Das Anwenden der Regel auf das Div-Tag „container“ hat folgende Auswirkungen:
Div-Tag „container“, 780 Pixel, kein Rand
A: Links ausgerichteter Text B: Weißer Hintergrund C: Durchgehender 1 Pixel starker schwarzer Rahmen
Die nächste CSS-Regel erstellt Stilregeln für das Div-Tag „sidebar“:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
Die #sidebar-Regel bewirkt, dass das Div-Tag „sidebar“ (Randleiste) eine Breite von 200 Pixel, eine grauen
Hintergrund, eine obere und untere Auffüllung von 15 Pixel, eine rechte Auffüllung von 10 Pixel und eine linke
Auffüllung von 20 Pixel hat. (Die Auffüllung erfolgt standardmäßig von oben rechts nach unten links.) Darüber
hinaus positioniert die Regel das Div-Tag „sidebar“ schwebend: nach links. Diese Eigenschaft schiebt das Div-Tag
„sidebar“ auf die linke Seite des Div-Tags „container“. Das Anwenden der Regel auf das Div-Tag „sidebar“ hat
folgende Auswirkungen:
B
C
A