Layout via CSS-Box-Modell

Unter der Verwendung des Box-Modells und einer Reihe weiterer Eigenschaften ist es möglich, Website-Layouts ohne Tabellenkonstruktionen umzusetzen. Die hierfür erforderlichen Eigenschaften werden wie folgt festgelegt:

 

 

 
Größenangaben

Über die Eigenschaften width und height können Kastenelementen fixe oder relative Abmessungen zugewiesen werden.

{width: 400px; height: 300px}

Werte:
feste Zahlenwerte, standardmäßig in Pixel (es dürfen auch negative Werte angegeben werden)
relative Werte (abhängig zum Browserfenster)

Standardeinstellung: auto
Vererbung: nein
Element: alle Elemente, außer Tabellenzeilen <tr>, height auch nicht bei Inline-Elementen (<strong>, <i>, etc.)

Beispiel:
p {width: 400px; height: 100px; background-color: #cccccc; margin: 20px; padding: 20px}

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

Diese angegebenen Größen eines Objekts bezieht sich auf die Abmessung des Inhalts OHNE Innenabstand, Rahmen und Außenabstand. Um also die totale Abmessung zu erhalten, müssen diese vier Werte addiert werden. Leider schert hier der IE5/Win aus der Standardisierung aus, da seine Definition von width und height alle vier Elemente mit einschließt, d.h.: wird ein Objekt wie folgt aufgebaut:

width (für den Inhalt): 200 px
height: 200 px
padding: 10 px
border: 5 px
margin: 20 px

wäre die korrekte Addition zum Erhalt der Gesamtbreite:
200+10+5+20=235px

Beim IE5 sieht dies aber so aus:

Gesamtbreite 200px-10px-5px-20px=165px Restbreite für den Inhalt, also 35 Pixel weniger als eigentlich benötigt. Bei pixelgenauen Layouts führt dies zu einer unschönen Fehldarstellung.

Zur Lösung des Problems können Schwachstellen in der Implementierung von CSS beim IE5 ausgenutzt werden. Wie dies funktioniert wird an anderer Stelle vermittelt.

Demo: für <span> um Navigation id #nav anlegen und id="nav" einsetzen.
Einfügen
height: 200px;

width: 100px;
background-color: #FFCC00;

 

 
Überlauf festlegen

Bei der fixen Definition von Größenangaben für ein Objekt ist es möglich, dass der Inhalt des Objekts mehr Platz beansprucht als zur Verfügung gestellt wurde. Durch die Verwendung der Eigenschaft overflow kann definiert werden, wie mit dem "überfließenden" Inhalt umgegangen werden soll:

{overflow: visible}

Werte:
visible (das Element wird dahingehend vergrößert, dass der gesamte Inhalt dargestellt werden kann)
hidden (die Elementgröße wird beibehalten, überfließender Inhalt wird am Rand des Elements abgeschnitten, d.h. nicht mehr angezeigt)
auto (browserabhängige Einstellung)
scroll (überfließender Inhalt wird am Rand des Elements abgeschnitten, d.h. nicht mehr angezeigt, kann aber über einen Scrollbalken erreicht werden)

Standardeinstellung: auto
Vererbung: nein
Element: alle Block-Elemente

Beispiel 1:
p {width: 200px; height: 100px; background-color: #cccccc; overflow: visible; margin-left: 400px}

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

Beispiel 2:
p {width: 200px; height: 100px; background-color: #cccccc; overflow: hidden;}

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

Beispiel 3:
p {width: 200px; height: 100px; background-color: #cccccc; overflow: scroll; margin-left: 200px}

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

keine Demo

 


Positionierung

Kastenelemente können auf unterschiedliche Weise positioniert werden. Diese wird über die Eigenschaft position festgelegt:

{position: static}

Werte:
static (das Element wird an der Stelle angezeigt, an der es der Reihenfolge nach im XHTML-Quelltext positioniert ist - Standardwert)
absolute (das Element wird dort abgebildet, wo es positioniert wurde, entweder in Abhängigkeit zum Koordinatensystem des Browserfensters oder bei Verschachtelungen - Box in Box - abhängig vom Elternelement)
fixed (Positionierung im Browserfenster, beim Scrollen bleibt das Element an gleicher Position stehen, d.h. es scrollt nicht mit - wird nicht unterstützt vom IE5+IE6/WIN))
relative (Element wird am vorhergehenden Element ausgerichtet)

Standardeinstellung: static
Vererbung: nein
Element: alle Elemente

Interessant wird die Eigenschaft position mit dem Wert absolute in Kombination mit Koordinatenangaben für das Box-Objekt 

Demo siehe unten.

 

 
Koordinatenangaben
Elemente können - unter zusätzlicher Verwendung von position: absolute - frei auf dem Monitor im Browserfenster verschoben werden. So kann auch die Reihenfolge der Inhalte in der Darstellung von der Reihenfolge im Quelltext abweichen.

top
top gibt den Abstand an, den ein Element vom oberen Rand (des Browserfensters oder Elternelement) entfernt ist.

{top: 200 px}

Werte:
feste Zahlenwerte, standardmäßig in Pixel (es dürfen auch negative Werte angegeben werden)
auto

Standardeinstellung: auto
Vererbung: nein
Element: alle Elemente

left
left gibt den Abstand an, den ein Element vom linken Rand (des Browserfensters oder Elternelement) entfernt ist.

{left: 500 px}

Werte:
feste Zahlenwerte, standardmäßig in Pixel (es dürfen auch negative Werte angegeben werden)
auto

Standardeinstellung: auto
Vererbung: nein
Element: alle Elemente

Beispiel:
So siehts's aus

right
right gibt den Abstand an, den ein Element vom rechten Rand (des Browserfensters oder Elternelement) entfernt ist.

{right: 100 px}

Werte:
feste Zahlenwerte, standardmäßig in Pixel (es dürfen auch negative Werte angegeben werden)
auto

Standardeinstellung: auto
Vererbung: nein
Element: alle Elemente

bottom
bottom gibt den Abstand an, den ein Element vom unteren Rand (des Browserfensters oder Elternelement) entfernt ist.

{bottom: 200 px}

Werte:
feste Zahlenwerte, standardmäßig in Pixel (es dürfen auch negative Werte angegeben werden)
auto

Standardeinstellung: auto
Vererbung: nein
Element: alle Elemente

Beispiel:
So siehts's aus

Grundsätzlich sollte man – bei der Verwendung von festen Größenangaben für Box-Objekte – nur jeweils einen horizontalen und einen vertikalen Wert vergeben. Werden z.B. vom vertikalen und horizontalen Abstand alle Werte angegeben, sollte auf die Größenangabe verzichtet werden.

Beispiel:
So siehts's aus

Demo:
1) in body einfügen: margin-left: 150px
2) in #nav einfügen:
position: absolute;
left: 25px;
top: 50px;

> Aufgabe

 
 
visibility
Mittels visibility kann ein Element unsichtbar gemacht werden. Der Raum, den das Objekt einnimmt wird aber frei gehalten.

{visibility: hidden}

Werte:
visible (das Element ist sichtbar)
hidden
(das Element ist unsichtbar)
collapse
(wird nur bei Tabellen verwendet).

Standardeinstellung: visible
Vererbung: ja
Element: alle Elemente

Beispiel:
So sieht's aus
 

Demo: in Datei zindex.htm für einen Layer {visibility: hidden} einfügen.

 
z-index
Mittels z-index kann die Reihenfolge von sich überlappenden Elementen angegeben werden. So können Elemente wie Ebenen definiert übereinander gestapelt werden. Dabei spielt es keine Rolle, an welcher hierarchischen Position sich das Element im Quelltext.

{z-index: 1}

Werte:
Ganze Zahl (= Reihenfolge)
auto

Standardeinstellung: auto
Vererbung: nein
Element: Block-Elemente

Beispiel:
So sieht's aus

Der Wert 1 definiert hierbei die unterste Ebene, jeder höhere Wert wird über dem niedrigeren Wert angezeigt.

Demo: in Datei zindex.htm für jeden Layer einen {z-index: Zahl} einfügen.

 
float

Neben der Positionierung von Elementen über die Angabe des Abstandes ist es auch möglich, mittels der Eigenschaft float die Position von Elementen in Abhängigkeit zu definieren. Dadurch entstehen Konstruktionen, die zwar nicht unbedingt pixelgenau, dafür aber skalierbar sind.

Dabei gibt die Eigenschaft float immer an, wie das aktuelle Element im Bezug auf das folgende Element ausgerichtet wird.

{float: right}

Werte:
left
right
none

Standardeinstellung: none
Vererbung: nein
Element: alle Elemente

Eine einfache Anwendung ersetzt das Attribut align="" innerhalb einer Grafik, d.h. es wird die Möglichkeit geboten, Text um eine Grafik herum fließen zu lassen.

Beispiel:
img {float: left; margin-right: 20px; margin-bottom: 10px; margin-top: 5px; width:300px}
So sieht's aus

Interessanterweise klappt dies auch mit anderen Objekten, z.B. mit einem Absatz:

Beispiel:
div {float: right; margin-left: 20px; margin-bottom: 10px; margin-top: 5px; width: 300px; background-color: #b4dca9; font-size: 10pt;}
So sieht's aus

Auf diese Weise können wir auch ganze Websites layouten (dazu später).

Achtung: bei der Verwendung von float muß immer eine Breite (width) angegeben werden.

Demo:
Datei float.html öffenen,
img mit Eigenschaft float: left; margin-right: 20px; margin-bottom: 10px; margin-top: 5px; width:300px}

 

 
clear

Bei der Verwendung von float kann es u.U. zu Anzeigeproblemen kommen, indem sich Elemente nebeneinander schieben (z.B. bei doppelt links).
Beispiel: Zwei Grafiken erhalten float: left, wird der neben stehende Text aber zu kurz, schieben sich die Grafiken nebeneinander.
So sieht's aus

Um solche und ähnliche Probleme zu vermeiden, wird die Eigenschaft clear verwendet. Sie hebt die float-Anweisung auf (funktioniert ähnlich wie <br clear="all" />).
Beispiel: Zwischen die Absätze mit den linksbündigen Grafiken wird ein <div> mit {clear: both;} gesetzt. Dieser neutralisiert die abhängige float-Eigenschaft, erzwingt also einen Umbruch des nächsten Elements (der Grafik) unter die oben stehende Grafik.
So sieht's aus

Werte:
none (keine Änderung – Standardwert)
left (hebt Eigenschaft float: left auf)
right
(hebt Eigenschaft float: right auf)
both
(hebt jede Eigenschaft float auf)

Standardeinstellung: none
Vererbung: nein
Element: alle Elemente

demo: Datei float.html, div {clear: both;}