css-café

5. Darstellung und Anzeige

• 5.1 display
• 5.2 float
• 5.3 clear
• 5.4 position
• 5.5 top, right, bottom, left
• 5.6 z-index
• 5.7 overflow
• 5.8 clip
• 5.9 visibility

Diese Eigenschaften steuern Darstellungs- und Anzeigeoptionen für die Erzeugung von Boxen, die Anordnung von Elementen sowie verschiedene visuelle Effekte.

5.1 display

Bestimmt die Art der Darstellung eines Elements [CSS1].

Beispiel:
#menue a {display: block;}

Werte	inline | block | list-item | none | run-in | inline-block | (compact | marker in CSS2.1 wieder entfernt) | inherit | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption
Default	inline (abhängig vom Browser-Stylesheet)
Vererbt	nein

• inline – erzeugt eine Inline-Box;
• block – erzeugt eine Block-Box;
• list-item – erzeugt eine Block- und eine Marker-Box;
• none – erzeugt keine Box, das heißt, die Box wird inklusive aller Nachfahren komplett aus dem Textfluss entfernt;
• run-in – diese Box wird zur ersten Inline-Box des übergeordneten Blocks (aber nur, wenn sie ausschließlich Inline-Boxen enthält. Außerdem muss ein Block-Element folgen, das nicht gefloatet oder absolut positioniert ist);
• inline-block – erzeugt eine Block-Box, die sich wie ein ersetztes Inline-Element verhält. Somit können alle Block-Eigenschaften auf dieses Element angewendet werden.

Die beiden letzten Werte werden bisher nur äußerst mangelhaft unterstützt und sind somit in der Praxis kaum anwendbar.

In CSS2 wurde diese Eigenschaft um viele neue Typen erweitert, unter anderen auch um ein komplettes Tabellenmodell. Einige dieser Änderungen (compact, marker) wurden von den Browserherstellern nicht implementiert und daher in der Version CSS2.1 wieder entfernt.

^ nach oben

5.2 float

Ein Element wird an den rechten oder linken Rand geschoben und von benachbartem Text „umflossen” [CSS1].

Beispiel:
#menue {float: left;}

Werte	left | right | none | inherit
Default	none
Vererbt	nein

Bis zur CSS2-Spezifikation war es zwingend erforderlich, einem Float eine spezifische Breite mitzugeben. Seit CSS2.1 ist es auch zulässig, eine Breite mit width: auto; zu definieren.

^ nach oben

5.3 clear

Beendet ein Float [CSS1].

Beispiel:
#footer {clear: both;}

Werte	none | left | right | both | inherit
Default	none
Vererbt	nein

Der normale Dokumentfluss kann für eine der beiden Seiten (left oder right) oder für beide gleichzeitig wieder hergestellt werden (both).

^ nach oben

5.4 position

Bestimmt die Positionierung im Dokumentfluss [CSS2].

Beispiel:
#wrapper {position: relative;}

Werte	static | relative | absolute | fixed | inherit
Default	static
Vererbt	nein

• static – Element verbleibt im normalen Dokumentfluss;
• relative – Element verbleibt im normalen Dokumentfluss, kann jedoch verschoben werden (durch die Zuweisung von top, right, left, bottom). Dieser Wert ist sehr nützlich, um einen Bezugspunkt für Nachfahren zu setzen, die absolut positioniert werden sollen;
• absolute – Element wird vollständig aus dem Dokumentfluss gelöst und hat so keinen Einfluss mehr auf die Positionierung anderer Elemente. Auch hier kann eine exakte Positionierung mit den Eigenschaften top, right, left und bottom vorgenommen werden (bezogen auf den umgebenden Block);
• fixed – entspricht dem Wert absolute, mit dem Unterschied, dass sich die Positionierung am Viewport orientiert, das Element beim Scrollen also nicht verschoben wird. Eine Besonderheit hier ist, dass so ausgezeichnete Elemente in speziellen Print-Stylesheets auf jeder ausgedruckten Seite wiederholt werden.

Der Wert fixed wird vom IE/win (bis 6) nicht unterstützt.

^ nach oben

5.5 top, right, bottom, left

Bestimmen den Ausgangspunkt eines positionierten Elements [CSS2].

Beispiel:
#header {position: absolute; left: 10px; top: 10px;}

Werte	Längenangabe | Prozentwert | auto | inherit
Default	auto
Vererbt	nein

Diese Eigenschaften können nur auf positionierte Elemente angewendet werden. Die position-Eigenschaft darf nicht static sein. Die Angabe negativer Werte ist zulässig.

^ nach oben

5.6 z-index

Bestimmt die Stapel-Position von Elementen [CSS2].

Beispiel:
#menue {position: absolute; z-index: 5;}

Werte	auto | Integer | inherit
Default	auto
Vererbt	nein

Diese Eigenschaft kann nur auf positionierte Elemente angewendet werden. Da sich positionierte Elemente überlappen können, stellt CSS eine Z-Achse (zum „Stapeln”) zur Verfügung. Die Zahl (integer) bestimmt die Position im „Stapel”, wobei 0 der untersten Schicht entspricht. Wird für mehrere Elemente der gleiche Wert angegeben, entscheidet die Reihenfolge im Dokumentenbaum.

Bereiche mit einem negativen z-index sind zwar erlaubt, werden von Geckos jedoch nicht angezeigt.

^ nach oben

5.7 overflow

Reguliert die Darstellung von Inhalten, die größer als das definierte Element sind [CSS2].

Beispiel:
.box {overflow: hidden;}

Werte	visible | hidden | scroll | auto | inherit
Default	visible
Vererbt	nein

• visible – übergroßer Inhalt läuft aus der Box heraus, bleibt aber sichtbar (was zu unerwünschten Überlappungen mit benachbarten Elementen führen kann);
• hidden – übergroße Inhalte werden am Rand der definierten Box abgeschnitten und nicht angezeigt. Zwar werden damit Überlappungen verhindert, allerdings können wichtige Informationen verloren gehen, zum Beispiel bei einer Schriftvergrößerung;
• scroll – innerhalb der definierten Box werden auf jeden Fall Scrollbalken angezeigt, egal ob der Inhalt passt oder übergroß ist;
• auto – innerhalb der definierten Box werden Scrollbalken nur angezeigt, wenn der Inhalt übergroß ist, also nicht innerhalb der definierten Box angezeigt werden kann.

Zwar unterstützt der Internet Explorer diese Eigenschaft, seine Interpretation des Defaults ist allerdings falsch. So werden definierte feste Größen wie Breite oder Höhe ignoriert. Wenn der Inhalt nicht in diese Dimensionen passt, wird das Element ausgedehnt.

^ nach oben

5.8 clip

Die Anzeige des Elements wird auf einen definierten Ausschnitt begrenzt [CSS2, CSS2.1].

Beispiel:
div.picture {position: absolute; rect(10px, 120px, 90px, 10px); width180px, height: 120px;}

Werte	rect(oben, rechts, unten, links) | auto | inherit
Default	auto
Vererbt	nein

Die Eigenschaft clip kann nur für absolut positionierte Elemente notiert werden. Weiterhin muß die Eigenschaft overflow mit einem anderen Wert als visible ausgestattet sein.

^ nach oben

5.9 visibility

Definiert die Sichtbarkeit eines Elements [CSS2].

Beispiel:
p.hinweis {visibility: hidden;}

Werte	visible | hidden | collapse | inherit
Default	visible
Vererbt	ja

• visible – Element ist sichtbar;
• hidden – anders als bei der Eigenschaft display: none; bleibt das Element hier Teil des normalen Dokumentflusses, d.h. es wird Platz für die definierte Ausdehnung dieses Elementes „reserviert” und somit auch die Platzierung und Ausdehnung benachbarter Elemente beeinflusst;
• collapse – entspricht dem Wert hidden; bei einigen Elementen des table-Modells lassen sich so Effekte wie das dynamische Ein- und Ausblenden von Spalten oder Zeilen erleichtern.