<div>⇒ Siehe auch Web-Design
Beispiel 1: Ein div-Element mit bestimmten Aussen- und Innenabständen
<div style="outline:1px solid #f00;margin:1cm 2cm 1cm 2cm; padding: 2em 5em 2em 5em;"> Aussenabstand: oben=1cm, rechts=2cm, unten=1cm, links=2cm<br> Innenabstand: oben=2em, rechts=5em, unten=2em, links= 5em</div>
Beispiel 2: Ein div-Element zentriert
<div align="center"> <h1>Titel zentriert</h1> <p>Text zentriert<br>(alle Zeilen)</p> <ul> <li>Sogar Listenaufzählungen</li> <li>mit den Punkten</li> <li>alles!</li> </ul> </div>
Text zentriert
(alle Zeilen)
Beispiel 3: Schriftfarbe in einem Block-Element bestimmen
Achtung: Der Titel ändert die Farbe nicht, wenn im Stylesheet eine Farbe angegeben ist
<div style="color:#0000FF;"> <h6>This is a header in a div section</h6> <p>This is a paragraph in a div section</p> </div>
This is a paragraph in a div section
Beispiel 4: Einen Kasten mit Farbe und Rahmen an an eine bestimmte Stelle verschieben
<div style="position:relative;left:50px;bottom:-20px; width:150px;height:50px;color:black; background-color:#efefef;border:1px solid #ff0000;"> Beispiel 1 </div>
Beispiel 5: Mehrere Kasten an verschiedenen Orten
<div style="position:relative;left:10px;bottom:-55px; width:300px;height:50px;color:black; background-color:#efefef; border:1px solid #ff0000;margin-bottom:10px;"> <p align="center"> Box 1<b> Erste Angaben in dieser ersten Box</p> </div> <div style="position:relative;left:320px;bottom:0px; width:200px;height:50px;color:black; background-color:#efefef;border:1px solid #ff0000;"> <p align="center">Box 2<br> Weitere Angaben in dieser zweiten Box</p> </div>
Box 1
Erste Angaben in dieser ersten Box
Box 2
Weitere Angaben in dieser zweiten Box
Beispiel 6: Ein Block-Element kann andere Elemente enthälten
(Das gelbe Div ist das Eltern-Element der anderen Elemente, die dadurch Kinder-Elemente sind)
<div style="color:black;background-color:yellow;width:100%; height:18em"> <h1 style="text-align:center"> Titel im gelben Div </h1> <p>Blöcke 1,2 und 3 standardmässig untereinander<p> <div style="color:black;background-color:lightskyblue;width:50%;"> Block 1</div> <div style="color:black;background-color:#33FF00;width:20%;"> Block 2<br>und irgend etwas</div> <div style="color:black;background-color:#33CCFF;width:20%;"> Block 3</div> <p> Blöcke 4,5 und 6 mit "float" nebeneinander formatiert</p> <div style="float:left;color:black;background-color:lightskyblue; width:20%;"> Block 4</div> <div style="float:left;color:black;background-color:#33FF00; width:60%;"> Block 5<br>und irgedetwas</div> <div style="color:black;background-color:#FFCC00;width:20%;"> Block 6</div> </div>
Blöcke 1,2 und 3 standardmässig untereinander
Blöcke 4,5 und 6 mit "float" nebeneinander formatiert
Bemerkung: Im Gegensatz zu den Block-Elementen gibt es die Inline-Elemente:
⇒ Siehe Web-Design
div
⇒ Siehe auch "Kasten/Rahmen"
div class="box-schwarz"
Bemerkungen zur Formatierung:
1) Ansicht des Eintrages im Stylesheet:
/* Schwarzer Rahmen */
.box-schwarz {
border-style:solid; border-width:2px; padding:1em;
border-color:#000000;background:#FFFFFF;
color:#000000;}
2) Im Quelltext steht im Textbereich:
<div class="box-schwarz"p> <span style="font-size:1.2em; font-weight: bold; color:red">Titel</span><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
div class="box-rot"
Bemerkungen zur Formatierung:
1) Ansicht des Eintrages im Stylesheet:
/* Roter Rahmen (vorne=outset) */
.box-rot {text-align:center;
display:block; border-style:outset; border-width:5px;
padding:1em;
border-color:#FF0000; background:#FFFFFF;
color:#000000;}
2) Im Quelltext steht im Textbereich:
<div class="box-rot"p> <span style="font-size:1.2em; font-weight: bold; color:red">Titel</span><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
div class="box-blau"
Bemerkungen zur Formatierung:
1) Ansicht des Eintrages im Stylesheet:
/* Blauer Hintergrund und Rahmen (vorne=outset)*/
.box-blau {
display:block; border-style:outset;
border-width:2px; padding:0.5em;
border-color:#99CCFF; background:#CCFFFF;
color:#000000;}
2) Im Quelltext steht im Textbereich:
<div class="box-blau"p> <span style="font-size:1.2em; font-weight: bold; color:red">Titel</span><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
div class="box-gruen"
Bemerkungen zur Formatierung:
1) Ansicht des Eintrages im Stylesheet:
/* Gruener Hintergurund und Rahmen (vorne=outset)*/
.box-gruen {
display:block; border-style:outset;
border-width:2px; padding:0.5em;
border-color:#99CC66; background:#CCFFCC;
color:#000000;}
2) Im Quelltext steht im Textbereich:
<div class="box-gruen"p> <span style="font-size:1.2em; font-weight: bold; color:red">Titel</span><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes: