WEBLAYOUT MIT DISPLAY
display ist die CSS-Eigenschaft, mit der definiert wird, wie sich Elemente im
Layout anordnen.
Mit display wird Elementen keine fixe Position auf einer
Webseite zugewiesen, sondern ein bestimmtes Verhalten
bezüglich der eigenen Größe und zu davor und danach
liegenden Elementen.
Für Weblayout ist diese Methode zur Positionierung in den meisten Fällen die
beste Lösung, da für unterschiedliche Ausgabeformate eine automatische
Anpassung der Platzierung notwendig ist. Es gibt eine sehr lange Liste an
möglichen Display-Werten, im Folgenden werden vier davon genauer
beschrieben.
DISPLAY:BLOCK
Den meisten HTML-Tags wird im Browser-Stylesheet der Display-Wert
block
zugewiesen. Block-Elemente positionieren sich immer unter oder über einembenachbarten Element und sind 100% breit, so breit wie das Eltern-Element, falls man keine alternative Breite definiert.
DISPLAY:INLINE
INLINE
INLINE
INLINE
INLINE
INLINE
INLINE
INLINE
INLINE
Inline-Elemente verhalten sich wie Text. Sie richten sich auch an der Grundlinie aus und stellen sich solange der Platz reicht nebeneinander wieWörter. Diese Elemente übernehmen typische Boxen-Eigenschaften wie
margin-bottom, margin-top, width
und
height
NICHT!
DISPLAY:INLINE-BLOCK
INLINE-BLOCK
INLINE-BLOCK
INLINE-BLOCK
INLINE-BLOCK
INLINE-BLOCK
INLINE-BLOCK
Inline-Block-Elemente verhalten sich einerseits wie Text, andererseits wie Boxen. Sie übernehmen alle Boxen-Eigenschaften, haben automatisch nur die Breite, die durch ihre Inhalte erzwungen wird und ordnen sichnebeneinander an.