Operation Manual

convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div>
Im oben genannten Beispiel sind für keinen der div-Tags Stile zugewiesen worden. Wenn keine CSS-Regeln definiert sind, wird jedes div-Tag
samt seinen Inhalten an einer Standardposition auf der Seite platziert. Wenn jedoch jedes div-Tag über eine eindeutige ID verfügt (wie im Beispiel
oben), können Sie mithilfe der IDs CSS-Regeln erstellen. Wenn diese CSS-Regeln angewendet werden, ändern sie den Stil und die Positionierung
der div-Tags.
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 „container“-div-Tag 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 linksbündig ausgerichtet ist. Das Anwenden der Regel auf das
„container“-div-Tag hat folgende Auswirkungen:
„container“-div-Tag, 780 Pixel, kein Rand
A. Linksbündiger Text B. Weißer Hintergrund C. 1 Pixel starker, durchgezogener schwarzer Rahmen
Die nächste CSS-Regel erstellt Stilregeln für das „sidebar“-div-Tag:
#sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; }
Die #sidebar-Regel bewirkt, dass das „sidebar“-div-Tag (für die Randleiste) eine Breite von 200 Pixel, einen 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 „sidebar“-div-Tag mit „float: left“. Diese Eigenschaft
schiebt das „sidebar“-div-Tag auf die linke Seite des „container“-div-Tags. Das Anwenden der Regel auf das „sidebar“-div-Tag hat folgende
Auswirkungen:
„sidebar“-div-Tag, links schwebend
A. 200 Pixel breit B. Obere und untere Auffüllung von 15 Pixel
Abschließend stellt die CSS-Regel für das „mainContent“-div-Tag (Hauptinhalt) das Layout fertig:
#mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; }
Die #mainContent-Regel bewirkt, dass das „mainContent“-div-Tag über einen linken Rand von 250 Pixel verfügt. Das bedeutet, dass es für einen
Leerraum von 250 Pixel zwischen der linken Seite des „container“-div-Tags und der linken Seite des „mainContent“-div-Tags sorgt. Außerdem
bewirkt die Regel einen Abstand von 20 Pixel auf der rechten, linken und unteren Seite des „mainContent“-div-Tags. Das Anwenden der Regel auf
das „mainContent“-div-Tag hat folgende Auswirkungen:
Der vollständige Code sieht folgendermaßen aus:
190