Materialien zum Unterricht
zweispaltiges Layout
Ein beliebtes Layout im Internet gliedert sich in vier Abschnitte:
Kopf, Menu, Inhalt und Fuß.
Ein solcher Aufbau lässt sich leicht mit Boxen realisieren:
<div id="seite">
<div id="kopf">
</div>
<div id="mitte">
<div id="menu">
</div>
<div id="inhalt">
</div>
</div>
<div id="fuss">
</div>
</div>
Die Seite schließt alles ein und legt die Breite fest. Sie sollte jetzt 900 px betragen. In diese Seite lagern sich die anderen Boxen ein.
Die Boxen kopf unf fuss sind schon vorhanden.
Die Box mitte dient als Container für die beiden Boxen menu und inhalt.
Die Box menu erhält float:left. Damit fließt die Box inhalt links an ihr vorbei. Mit margin-left wird die Box inhalt im richtigen Seitenabstand zur linken Kante der Box mitte eingerichtet.
Damit die Boxen richtig positioniert werden und sich weder überlappen und eine Abstand haben, müssen die Größen und Abstände genau berechnet werden.
Für das Menu werden von der Seitenbreite 180 px geopfert. Es soll einen 1 Pixel breiten Rand erhalten und der Innenabstand 4 px breit sein.
Damit erhlät man für die Breite des Inhalts 170 Pixel. (180 - 4 - 4 - 1 - 1)
zurück