Operation Manual

</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo 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:
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 „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:
266