Materialien zum Unterricht

Eine Übung zum Boxen-Modell

Erzeuge im Ordner public_html einen neuen Unterordner test und dort eine neue HTML-Datei mit dem Namen boxen.html und eine CSS-Datei mit Namen boxen.css.

Übertrage folgenden Quelltext in die Datei:

Formatiere die Box in der boxen.css mit einem farbigen Rahmen von 1 Pixel Breite. Die Box macht sich über dem gesamten Bildschirm breit.

Schreibe hinter der Box im HTML-Quelltext einen Text :

Dies ist Text nach der Box.

Vergrößere den Text durch kopieren und einfügen auf 10 Zeilen.

Verkleinere die Box über

width:200px;

auf eine Größe von 200px.

Jetzt kommt das Neue: Der

Text nach der Box

soll den rechten Raum neben der Box ausfüllen und unter der Box weiterlaufen, er soll die Box umfließen. Dazu ist in der boxen.css für die Box1 folgende Formatierung einzutragen:

float:left;

Das bedeutet, dass die Box links am äußeren Rand der übergeordneten Box steht. Da es keine übergeordnete Box gibt, erscheint sie links am Rand der Seite.
Der nachfolgende Text beginnt dann hinter der Box.

Probiere aus:

float:right;

Ändere wieder zurück und erzeuge eine zweite Box Box2, die rechts angeordnet ist. Füge diese Box einmal unter dem Text

Dies ist der Text nach der Box

und einmal über diesem Text in der HTML-Datei an.

Folgt die Box2 sofort der Box1, liegt die Box2 über der Box1. Beide fangen am linken Rand an und überdecken sich teilweise.

Damit Box2 genau neben Box1 steht, muss deren linker Randabstand mit margin-left um die Größe der Box1 verändert werden.

margin-left:202px;

Die Box1 ist 200 px breit und hat auf jeder Seiten einen 1 Pixel breiten Rahmen.

Erzeuge eine neue Box mit Namen Box0, die den bisherigen Quelltext umschließt. Diese Box hat die Breite 100% sowie keinen float-Eintrag. Zur besseren Unterscheidung sollte jede Box einen andersfarbigen Rahmen haben. Mit margin und padding können die Boxen noch ansehnlicher gestaltet werden.

Wie häufig im Leben ist aber nicht alles so einfach.

<div id="box0">
     <div id="box1">
        Das ist der Inhalt von Box 1<br>
		Das ist der Inhalt von Box 1<br>
		Das ist der Inhalt von Box 1<br>
		Das ist der Inhalt von Box 1<br>
    </div>
 </div>

Verkürze den bisherigen Quelltext auf die Box0 und die Box1. Die leere Box0 soll die Box1 aufnehmen.

Damit die Box0 die andere Box umschließt, muss in der Box0 am Ende folgender Eintrag gemacht werden:

<p style="clear:both;"></p>

Das widerspricht der Trennung zwischen Inhalt und Form, da im Quelltext ein Absatz eingefügt werden muss, der ausschließlich der Formatierung dient.

zurück