2.6.2 Block-Element <div>
en Block element <div>
fr Élément bloc <div>
- 1 Allgemein
- 2 Block-Element
<div>in HTML - 3 Block-Element
<div>mit CSS-Stylesheet formatiert - 4 Klassen in Verbindung mit den Elementen
divundspan- a) Workshops
HTML:
Text-Formatierung
⇧ 1 Allgemein
↑ a) Bezeichnungen
Block level element:
- div = division = Bereich
↑ b) Grundalgen-Websites und Workshops
- CSS 4 You de Block-Elemente
Bemerkung: Im Gegensatz zu den Block-Elementen gibt es die Inline-Elemente:
- CSS 4 You de Inline-Elemente
⇧
2 Block-Element <div> in HTML
- a) Workshops
- b) Beispiel 1: Ein div-Element mit bestimmten Aussen- und Innenabständen
- c) Beispiel 2: Ein div-Element zentriert
- d) Beispiel 3: Kasten mit Farbe und Rahmen verschieben
- e) Beispiel 4: Mehrere Kasten an verschiedenen Orten
- f) Beispiel 5: Ein Block-Element kann andere Elemente enthalten
↑ a) Workshops
-
SELFHTML
de
Allgemeines Block-Element
de Beispiel
↑ b) Beispiel 1: Ein div-Element mit bestimmten Aussen- und Innenabständen
1) Angabe im Quelltext
<div style="outline:1px solid f00; margin:1cm 0.5cm 1cm 0.5cm; padding: 2em 1em 2em 1em">Aussenabstand (margin): oben=1cm, rechts=0.5cm, unten=1cm, links=0.5cm<br> Innenabstand (padding): oben=2em, rechts=1em, unten=2em, links=1em</div>
2) Ausgabe im HTML-Dokument
Innenabstand (padding: oben=2em, rechts=1em, unten=2em, links= 1em
↑ c) Beispiel 2: Ein div-Element zentriert
1) Angabe im Quelltext
<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>
2) Ausgabe im HTML-Dokument
Titel zentriert
Text zentriert
(alle Zeilen)
- Sogar Listenaufzählungen
- mit den Punkten
- alles!
-
SELFHTML
de
Allgemeines Block-Element
de Beispiel
↑ d) Beispiel 3: Kasten mit Farbe und Rahmen verschieben
1) Angabe im Quelltext
<div style="position:relative;left:50px;bottom:-20px; width:150px;height:50px;color:black; background-color:#efefef;border:1px solid #ff0000">Beispiel 1</div>
2) Ausgabe im HTML-Dokument
↑ e) Beispiel 4: Mehrere Kasten an verschiedenen Orten
1) Angabe im Quelltext
<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 <br> 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>
2) Ausgabe im HTML-Dokument
Box 1
Erste Angaben in dieser ersten Box
Box 2
Weitere Angaben in dieser zweiten Box
↑ f) Beispiel 5: Ein Block-Element kann andere Elemente enthalten
1) Angabe im Quelltext
<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%"><p>Block 1</p></div><div style="color:black; background-color:#33FF00; width:20%"><p>Block 2<br>und irgend etwas</p></div><div style="color:black; background-color:#33CCFF; width:20%"><p>Block 3</p></div><p>Blöcke 4,5 und 6 mit "float" nebeneinander formatiert</p><div style="float:left; color:black; background-color:lightskyblue; width:20%"><p>Block 4</p></div><div style="float:left; color:black; background-color:#33FF00; width:20%"><p>Block 5<br>und irgedetwas</p></div><div style="float:left; color:black; background-color:#FFCC00; width:20%"><p>Block 6</p></div></div>
2) Ausgabe im HTML-Dokument
Das gelbe Div ist das Eltern-Element der anderen Elemente, die dadurch Kinder-Elemente sind.
Titel im gelben Div
Blöcke 1,2 und 3 standardmässig untereinander
und irgend etwas
Blöcke 4,5 und 6 mit "float" nebeneinander formatiert
und irgedetwas
⇧
3 Block-Element <div> mit CSS-Stylesheet formatiert
- a) Workshops
- b) Beispiel 1: Anwendung von
div class="box-schwarz" - c) Beispiel 2: Anwendung von
div class="box-rot" - d) Beispiel 3: Anwendung von
div class="box-blau" - e) Beispiel 4: Anwendung von
div class="box-gruen"
↑ a) Workshops
- WDG en The DIV Element
- CSS 4 You de Block-Elemente
Bemerkung: Im Gegensatz zu den Block-Elementen gibt es die Inline-Elemente:
- CSS 4 You de Inline-Elemente
↑
b) Beispiel 1: Anwendung von div class="box-schwarz"
Bemerkungen zur Formatierung:
- Der Rahmen ist schwarz und der Hintergrund ist weiss.
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:
Mitteilung
↑
c) Beispiel 2: Anwendung von div class="box-rot"
Bemerkungen zur Formatierung:
- Der Rahmen ist rot und der Hintergrund ist weiss.
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:
Mitteilung
↑
d) Beispiel 3: Anwendung von div class="box-blau"
Bemerkungen zur Formatierung:
- Der Rahmen ist blau und der Hintergrund ist hellblau.
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:
Mitteilung
↑
e) Beispiel 4: Anwendung von div class="box-gruen"
Bemerkungen zur Formatierung:
- Der Rahmen ist grün und der Hintergrund ist hellgrün.
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:
Mitteilung
⇧
4 Klassen in Verbindung mit den Elementen div und span
- a) Workshops
↑ a) Workshops
-
SELFHTML
de
Klassen in Verbindung mit den Elementen div und span
de Beispiel: Eine Kapitelüberschrift