BasisSeminare
Zum Seitenanfang Schritt hoch Schritt runter Zum Seitenende
Seite: Erklärbuch | Container in html <div> ... </div>


Wo nur hin mit den ganzen Anweisungen und Styles? Sie sollten gut verpackt werden, damit sie ohne Störung auf deiner html-Seite ihren Dienst tun können. Dafür brauchst du einen geeigneten Behälter.

Ein solcher Behälter ist der sogenannte div-Container.
<div> … </div>


Div ist wie das p-Tag ein Blockelement. <div> kennzeichnet den Anfang des Behälters und </div> das Ende.

Ein Div beginnt immer mit einer neuen Zeile und anschließend beginnt auch immer eine neue Zeile.

Man nutzt dies, um z.B. HTML-Elemente mit CSS zu gestalten, zu positionieren usw. Innerhalb des Div-Containers werden dafür class, id und style benutzt.

In unseren Codes "verschachteln" wir solche Div-Container, um in verschiedenen bereichen unterschiedliche Dinge zu tun. Da ist es wichtig, dass man jedes geöffnete Tag auch an der richtigen Stelle wieder schließt.



Woher weiß aber der Browser welches Div geschlossen werden soll?


Das ist eigentlich ganz einfach.
Stellt euch die 4 ersten "Div-Eröffnungen" wie die Unterteile einer russischen Matroschka-Puppe oder wie einen Satz Deko-Schachteln vor. Nur diesmal auf dem Kopf.

Im Code sähe es so aus (die Zahlen sind nur Inhalte zur Orientierung im Bild):

1
2
3
4
 
<div>1
<div>2
<div>3
<div>4
 


Das würde so aussehen:



Jetzt nehmen wir mal an, es wir nur ein Div geschlossen.
Der Code sieht nun so aus:

1
2
3
4
5
 
<div>1
<div>2
<div>3
<div>4
</div>
 


Das folgende Bild erklärt welches Div nun geschlossen wird. Es ist immer das nächst gelegene.



Die anderen 3 Div´s bleiben geöffnet.
Darum müssen alle geschlossen werden.

1
2
3
4
5
6
7
8
 
<div>1
<div>2
<div>3
<div>4
</div>
</div>
</div>
</div>
 




Es werden die Div´s zuerst geschlossen, die als letztes geöffnet wurden.

Oder noch einmal etwas anders beschrieben:

Geht mal durch 4 verschlossene Türen die direkt hintereinander liegen.
Ihr öffnet die erste, dann die zweite usw.
Wenn ihr sie wieder schliessen wollt, müsst ihr den Weg wieder zurück gehen.
Tür 4 schliessen, Tür 3 schliessen usw.



Div-Blöcke haben ein Anfangs- und ein Ende-Tag.
Bei verschachtelten Div's müssen die Tags in umgekehrter Reihenfolge wieder geschlossen werden.




Verschachtelt ohne Worte

















... und noch eine kleine Verschlusssache:





Was das alles mit unseren Div-Containern zu tun hat, kann sich jeder selbst überlegen.





Aufbauende Seminare zum Thema:

Basisseminar zur Verwendung von Div-Containern
Denkaufgabe am Beispiel eines Div-Tags
Spezialseminar in dem solche Div-Boxen angewandt werden



Xobor Xobor Wiki
Datenschutz