Webmaster-Crashkurs

Übersetzt mit freundlicher Genehmigung von http://www.quirksmode.org/css/display.html

Die Erklärung zu verschiedenen Arten in CSS von display:

Wie ein bestimmtes HTML-Element angezeigt werden soll, kann über die Anzeige-Eigenschaft festlegt werden.

Siehe hierzu auch die W3C-Spezifikationen.

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
Ja Ja Ja Ja Ja Ja
 
Ja Ja Ja Ja Ja Ja
 
Ja Ja Ja Ja Ja Ja
 
Nein unvollständig Ja Nein Ja Ja Ja Ja Ja

IE 6/7 akzeptiert den Wert nur bei Elementen, die naturgemäß bereits display: inline sind.

Nein Ja Ja Ja Ja Ja Ja
Nein Ja Nein falsch falsch Ja falsch

Safari, Chrome und Konqueror unterstützen run-in auch dann, wenn es vor einem Element mit display: inline auftritt. Das sollte eigentlich nicht sein.

Nein Nein buggy Nein Nein buggy buggy
 
Nein Ja Ja unvoll-
ständig
Ja unvoll-
ständig
Ja Ja Ja

Safari 3 und Chrome 1 benötigen Elemente mit display: table und display: table-row, um die Zellen korrekt anzuzeigen. Die anderen Browser, inklusive Safari 4 und Chrome 2, nicht.

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7

display: block

display: block bedeutet, dass dieses Element als Block-Element angezeigt wird, wie Absätze (<p>) und Überschrifen (<h...>).

Ein Block-Element hält Abstand nach oben sowie nach unten und es werden keine weiteren HTML-Elemente in der Zeile geduldet. Die Ausnahme wird z.B. gemacht durch Hinzufügen eines float für ein anderes Element.

Live Beispiel:
first {display: block}
second {display: block}
third {display: block}

display: inline

display: inline bedeutet, dass diese Elemente in der Linie im entsprechenden Block angezeigt werden. Inline, also auf gleicher Zeile. Wenn kein Element nach dem auf inline gesetzten Element kommt, wenn also das auf inline gesetzte Element zwischen 2 Blöcken sich befindet, wird es zum "anonymen Block" - mit der kleinsten möglichen Breite.

Live Beispiel:
display: block
display: inline
display: block
display: block
display: block
display: inline

display: none

display: none bedeutet, dass dieses Element nicht angezeigt wird (deshalb ist es im folgenden Beispiel nicht zusehen).

Live Beispiel:
display: block
display: block

display: inline-block

Anmerkung: In IE 6 und 7 inline-block funktioniert dies nur bei Elementen, die von Natur aus Inline-Elemente sind.

Firefox 2 und älter unterstützen nicht diesen Wert. Möglich ist die Nutzung über -moz-inline-box, nur sollte man sich dessen bewusst sein, dass dieses nicht exakt dem inline-block entspricht und es nicht immer in allen Situationen funktioniert wie erwartet!

Ein inline block wird in der Zeile platziert (d. h. auf der gleichen Zeile wie angrenzender Inhalt), aber es verhält sich wie ein Block-Element.

Live Beispiel:
display: block
Hier ein wenig Textinhalt, um das Verhalten des Blocks zu beobachten.
display: inline-block; width: 10em
Hier ein wenig Textinhalt, um das Verhalten des Blocks zu beobachten.
Hier ein wenig Textinhalt, um das Verhalten des Blocks zu beobachten. Hier ein wenig Textinhalt, um das Verhalten des Blocks zu beobachten. span (und nicht div) mit display: inline-block; width: 10em
Hier ein wenig Textinhalt, um das Verhalten des Blocks zu beobachten.
Hier ein wenig Textinhalt, um das Verhalten des Blocks zu beobachten.

Es sollte wie in folgender Bildschirmkopie vom Browser Opera arbeiten:

Bildschirmkopie: Beispiel von display: inline-block
Beispiel von display: inline-block

Die eigentliche Anwendung von "display: inline-block" ist, wenn für ein Inline-Element eine Breite über "width" zugewiesen werden soll. Unter bestimmten Umständen ist bei einigen Browsern die Zuweisung einer Breite auf ein echtes Inline-Element nicht möglich. Wenn aber auf die "display: inline-block" umgestellt wird, ist es möglich die Breite width mitzugeben.

display: list-item

display: list-item bedeutet, dass dieses Element als Listen-Element behandelt wird. Das hat als Auswirkung, dass Aufzählungszeichen (in der Regel Aufzählungspunkte) anzeigt werden wie beim HTML-TAG <ul>. Eine Ausnahme bildet der IE5 auf dem Mac, der eine numerische Aufzählung (wie der HTML-TAG <ol>) anzeigt. Achten Sie darauf, ob die Startzahl korrekt ist. Gibt es davor schon Aufzählungen, kann es durchaus passieren, dass die angezeigte mit der nächsthöheren Zahl weitermacht.

Live Beispiel:
display: block
display: list-item
display: list-item

display: run-in

Safari, Chrome, und Konqueror handhaben den zweiten Test falsch. Die Run-in-Box darf nicht neben der Inline-Box angezeigt werden.

display: run-in Definition vom W3C:
"If a block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box.
Otherwise, the run-in box becomes a block box."

"Wenn eine Block-Box (die nicht floatet und nicht absolut positioniert ist) der run-in-Box folgt, wird die run-in-Box zur ersten Inline-Box.
Andernfalls wird die run-in-Box zu einer Block-Box."

Frage: Warum sollte man das machen wollen?

Wie auch immer, Opera ist der einzige Browser, der run-in-Box unterstützt. Er entfernt allerdings den oberen und unteren Innenabstand von der run-in-Box, obwohl es vom W3C keinerlei Anweisung dafür gibt.
Der IE 5 Mac reagiert auf die run-in-Box, indem die-run-in-Box eine leichte Einrückung erfährt. Ich habe keine Idee, wozu.

Live Beispiel:
display: block
display: run-in
display: block
display: run-in
display: inline

Es sollte gehen, wie es der Browser Opera zeigt:

Bildschirmkopie: Beispiel von display: run-in
Beispiel von display: run-in

display: compact

Kein Browser unterstützt compact richtig. Bisher zeigt compact bei Safari, Opera und Konqueror Wirkung, aber diese ist falsch (denke ich).

display: compact Definition vom W3C:
"If a block box (that does not float and is not absolutely positioned) follows the compact box, the compact box is formatted like a one-line inline box. [...lots of stuff about the margin...]
Otherwise, the compact box becomes a block box."

"Wenn eine Block-Box (die nicht floatet und nicht absolut positioniert ist) der compact-Box folgt, wird die compact-Box formatiert wie eine einzeilige Inline-Box.
Andernfalls wird die compact-Box zu einer Block-Box."

Die compact-Box wird auf der linken Seite des nachfolgenden Blocks platziert, wenn dort genügend Platz dafür vorhanden ist. Im zweiten Beispiel wurde unter der dritten Box genügend Platz für die compact-Box geschaffen über einen linken Außenabstand. Im ersten Beispiel ist nicht genügend Platz, somit muss die compact-Box als ein Block-Element angezeigt werden.

Live Beispiel:
display: block
display: compact
display: block
display: compact
display: block; margin-left: 10em

Es sollte gehen, wie es in Bildschirmkopie des Browsers Opera gezeigt wird:

Bildschirmkopie: Beispiel von display: compact
Beispiel von display: compact

display: table

Nicht unterstützt vom IE.

Safari fordert Elemente mit display: table und display: table-row, um die Zellen korrekt anzuzeigen.

iCab zeigt keinen Text bei 'display: table-row'.

display: table sagt den Elementen, dass diese als Tabelle anzeigt werden sollen. Geschachtelte Elemente sollten angezeigt werden als table-row und table-cell, nachgeahmt den guten alten <tr> und <td>. Es gibt auch ein display: table-column, soll aber nichts anzeigen und dient wie die ursprünglichen COL zum Transport der Design-Informationen. Ich bin mir nicht sicher, wie es funktioniert.

Live Beispiel:
Dieses Beispiel hat divs mit display: table, table-row und table-cell, alle richtig verschachtelt.
display: table
display: table-row
display: table-cell und ein bischen Inhalt
display: table-cell
display: table-row
display: table-cell
display: table-cell
Das äußerster div von diesem Beispiel hat als Angabe display: block und nicht table.
display: block
display: table-row
display: table-cell und ein bischen Inhalt
display: table-cell
display: table-row
display: table-cell
display: table-cell
Dieses Beispiel hat keine docs mit der Angabe display: table-row
display: table
display: table-cell und ein bischen Inhalt
display: table-cell

Es sollte aussehen, wie es die Bildschirmkopie des Firefox 1.5 zeigt:

Bildschirmkopie: Beispiel von display table values im Mozilla
Beispiel von display table values im Mozilla

Indessen, Safari besteht darauf die Elemente mit display: table and display: table-row: wie folgt anzuzeigen.

Bildschirmkopie: Beispiel von display table values im Safari
Beispiel von display table values im Safari


Auf der Originalseite findet sich hier die Möglichkeit, die verschiedenen Display-Arten online zu kombinieren und zu testen. Anzusehen unter: http://www.quirksmode.org/css/display.html#link9

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2013   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit Videos