CSS Box-Modell
Pixelgenaues Layout

Allgemein

Zwar gibt es vom W3C klare Vorgaben in Sachen Box-Modell, doch nicht alle Browser setzen diese Definitionen auch korrekt um. Ohne Hacks und Tricks funktioniert pixelgenaues Layout nicht.

Abstand halten

CSS Box-Modell

CSS definiert für jedes Element des Element-Baums eine Box. Vereinfacht vorgestellt könnte man sich diese Box wie ein gemaltes Bild vorstellen. Das Element selbst ist das Bild. Um dieses Bild beziehungsweise Element herum wird meist ein Rahmen gezogen. Zwischen Bild und Rahmen wird der Padding- oder Auffüllbereich gesetzt. Er dient zum Beispiel dazu, dass der Rahmen nicht direkt am Bild hängt. Um den Rahmen wiederum wird ein Bereich definiert, der sich Margin- oder Begrenzungsbereich nennt. Er dient dazu, dass andere Bilder beziehungsweise Elemente einen gewissen Mindestabstand zu diesem Bild haben müssen.

Ein solches Bild kann nun fast jedes beliebige Element sein, zum Beispiel Text (p) oder eine Tabelle (table) oder ein anderes Element, ausgenommen head und frameset. Einschränkungen gibt es bei frame, iframe und body. Somit ist es möglich, bei beinahe jedem Element einen Rahmen oder einen Mindestabstand zu definieren. Dafür steht eine Reihe von CSS-Eigenschaften zur Verfügung.


Padding, Border und Margin

CSS Box-Modell


Berechnung von Außenabständen

CSS Box-Modell

Die Definition der Außenabstände von Elementen erfolgt mit der border-Eigenschaft. Sie ist die größte Zusammenfassung der Rahmeneigenschaften und beschreibt die Eigenschaften der Rahmenfarbe, des Rahmenstils und der Rahmenbreite für alle vier Rahmenstücke. Als Wert kann dazu jeweils einer der Werte für diese drei Eigenschaften notiert werden. Mehrere Werte werden durch Leerzeichen getrennt; eine Reihenfolge ist nicht definiert. Beispiele:


P.a { border: 2px solid red; }
/*Alle vier Rahmen sind rot, solid und von einer 2-Pixel Breite*/

P.b { border: green 25%;
border-top-color:red; }
/*Alle bis auf das obere Rahmenstück sind grün. Alle Stücke sind 25 Prozent breit.*/

Allerdings lassen sich die border-Eigenschaften auch einzeln definieren. Zum Beispiel die Farbe: Mit border-top-color, border-bottom-color, border-left-color und border-right-color kann man die Farben für jedes einzelne Randstück einer Box individuell festlegen:


P { border-top-color:red;
border-bottom-color:green; }

DIV { border-left-color:'#ff0000';
border-right-color:rgb(0,255,0); }

Die border-color-Eigenschaft stellt eine Zusammenfassung der vier oben genannten Rahmenfarben-Eigenschaften dar. Dabei können ein bis vier Farbangaben als Wert notiert werden. Weiterhin kann man noch den Stil des Rahmens entweder global mit border-style oder individuell mit border-top-style, border-bottom-style, border-left-style und border-right-style beschreiben. Folgende Werte stehen für die border-style-Eigenschaft zur Verfügung: dashed (gestrichelte Linie), dotted (gepunktete Linie), double (doppelte Linie), groove (Pyramiden-Effekt), inset (Hervorhebung), none (kein Rahmen), outset (Gegenteil von inset), ridge (Gegenteil von groove) und solid (einfache Linie).

Die Eigenschaften zur Bestimmung der Rahmenbreiten sind border-top-width, border-bottom-width, border-left-width und border-right-width. Jede von ihnen beschreibt die Breite eines Rahmenteilstücks. Die border-width-Eigenschaft ist eine Zusammenfassung der vier oben genannten Eigenschaften.

Eine zusammenfassende Beschreibung der einzelnen Rahmenteile wird mit den Eigenschaften border-top, border-bottom, border-left und border-right definiert. Als Werte der Eigenschaften können jeweils die zu dem Rahmenabschnitt dazugehörigen Werte der anderen oben beschriebenen Eigenschaften notiert werden. Die border-top-Eigenschaft beispielsweise kann die Werte der border-top-width-, border-top-color- und border-top-style-Eigenschaften erhalten. Eine Reihenfolge für die Anordnung der Eigenschaften ist nicht festgelegt, da die Wertarten grundsätzlich verschieden sind. Mehrere Werte werden durch Leerzeichen getrennt. Beispiel:


P.a { border-left: 2px red;
border-left-style: groove; }
P.b { border-bottom: solid;
border-top-width: 5px; }


Berechnung von Breite und Höhe

CSS Box-Modell

Das Box-Modell definiert die Berechnung der Breite und Höhe von Elementen. Seit der CSS-1-Spezifikation des W3-Konsortiums aus dem Jahr 1996 errechnet sich die Gesamtbreite eines Elements aus einer Addition der Breite des Elementinhalts (width), des Innenabstands (padding), der Rahmenstärke (border-width) und des Außenabstands (margin). Dies gilt analog für die Höhe (height) sowie generell für alle Maßeinheiten; diese dürfen auch gemischt angewandt werden.

Das folgende Beispiel soll den Berechnungsgrundsatz erläutern: Wird ein Element mit einer Breite von 200 Pixel, einer Höhe von 100 Pixel und einem Innenabstand und Rahmen von je 20 Pixel Stärke auf allen Seiten definiert, so beträgt die tatsächliche Breite 280 Pixel und die Höhe 180 Pixel. Ein zusätzlich definierter Außenabstand (margin) müsste zu diesen Werten nochmals addiert werden.

Und damit fangen die Probleme an. An dieser Stelle schlägt nämlich der viel zitierte Box-Modell-Fehler der älteren Internet-Explorer-Versionen bis einschließlich Version 5.5 zu. Im Gegensatz zur W3C-Spezifikation werden Innenabstände und Rahmenstärken nicht zur Gesamtbreite hinzuaddiert, sondern nur der Außenabstand. Für die obige Beispielberechnung bedeutet dies, dass ein solcher Browser nicht auf eine Gesamtbreite von 280 Pixel kommt, sondern nur auf 200 Pixel. Das wiederum führt bei einer pixelgenauen Positionierung zu unterschiedlichen Darstellungen.


Genaue Positionierung

CSS Box-Modell

Mit Hilfe der position-Eigenschaft kann man ein Element auf einer Webseite pixelgenau positionieren. Folgende Werte können dabei notiert werden:

absolute: Absolute Positionierung durch die Angaben left, top, right und bottom. Das heißt, das Element wird genau dort im Dokument abgebildet, wo es hindefiniert wird beziehungsweise wurde. Scrollt man das Dokument, so bewegt sich das Element mit.
fixed: Fixierte Positionierung. Das heißt, das Element wird genau an dieser Stelle im Dokument – besser noch: im Bildbereich – fixiert, wo es definiert wurde. Scrollt man das Dokument, bleibt es dennoch an derselben Stelle im Bildausschnitt stehen.
relative: Relative Positionierung. Das heißt, das Element richtet sich nicht am Dokument, sondern am vorhergehenden Element aus. Es wird somit also auch mitgescrollt.
static: Statische Positionierung. Das Element wird ganz normal dargestellt ? ohne besondere Positionierung. Scrollt man das Dokument, so läuft es mit.

Ein Beispiel für die genaue Positionierung zum Beispiel eines div-Containers kann mit folgender CSS-Definition vorgenommen werden:


#container {
position: absolute;
top: 50px;
left: 70px;
width: 150px;
height: 300px;
}

Inhalt des Containers

Die Anweisung erzeugt eine Box mit den Maßen 150 x 399 Pixel, 50 Pixel vom oberen Rand und 70 Pixel vom linken Rand entfernt.


Overflow-Verhalten

CSS Box-Modell

Hat man die Größe und Position eines Elements festgelegt, kann oft noch nicht definiert werden, wie groß der Text ist, den ein solcher Container einmal aufnehmen soll. Die overflow-Eigenschaft bestimmt, wie überlaufender Inhalt eines Elements behandelt werden soll. Dazu gibt es die Werte auto, hidden, scroll und visible.

auto bedeutet, dass je nach Browser beziehungsweise Betrachter die Einstellungen und Werte des Browsers übernommen werden.
hidden bedeutet, dass sämtlicher Inhalt, der über die Box-Grenze hinausgeht, abgeschnitten beziehungsweise versteckt wird.
scroll bedeutet, dass das Element im Fall eines Überlaufs mit Scrollbars versehen wird.
visible bedeutet, dass der gesamte Inhalt, also auch der, der sich außerhalb der Box befindet, dargestellt wird.

Ein Code-Beispiel für die Definition eines Scrollbalkens beim Overflow eines div-Containers kann so aussehen:

DIV { overflow:scroll; }


Lösungen für den Box-Modell-Bug

CSS Box-Modell

Microsoft hat mit der Einführung des so genannten Doctype-Switches eine Lösung des Problems präsentiert. Dieser bietet die Möglichkeit, in Abhängigkeit der Doctype-Deklaration in einem HTML-Dokument zwischen der richtigen und falschen Umsetzung des Box-Modells umzuschalten. Es gibt jedoch noch Alternativen, mit denen man das Problem in den Griff bekommen kann.

Da es sich um ein spezifisches Problem der Versionen bis 5.5 handelt, kann natürlich eine klassische Browserweiche eine Lösung sein. Um die Problematik einer ausgeschalteten Javascript-Unterstützung zu umgehen, ist eine Skript-Lösung auf dem Server zum Beispiel mit PHP vorzuziehen. Die Weiche lädt im Fall eines Internet Explorers bis Version 5.5 eine CSS-Definition mit einer abweichenden Berechnung von Breite und Höhe einer Box und in allen anderen Fällen eine mit einer W3C-konformen Berechnung.


CSS-Hacks als Lösung

CSS Box-Modell