Die display-Eigenschaft

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Bevor wir uns der Positionierung von Elementen mit CSS zuwenden, werfen wir noch einen Blick auf die Eigenschaft display, die erhebliche Auswirkungen auf das Seitenlayout haben kann.

Die display-Eigenschaft entscheidet darüber, wie der Browser ein Element darstellen soll — ob als Block, Listenelement, Textzeile oder in einer anderen Form. Die CSS2-Spezifikation sieht 17 verschiedene Werte vor. Von den Browsern werden derzeit aber nur sechs unterstützt, von denen vier wirklich wichtig sind. Eine vollständige Referenz zur display-Eigenschaft finden Sie unter Referenz der CSS-Eigenschaften.

Die sechs möglichen Werte der display-Eigenschaft sind:

• block
• inline
• list-item
• none
• table-footer-group
• table-header-group

Die Voreinstellung für die display-Eigenschaft richtet sich nach dem Elementtyp, dem sie zugewiesen wird. Blockelemente wie p, h1 und div nehmen automatisch den Wert block an, während Inline-Elemente wie strong, code und span den Wert inline annehmen, wenn ihnen nicht ausdrücklich ein anderer Wert zugewiesen wird. Für Listenpunkte steht extra der Wert list-item zur Verfügung, ebenso wie für Tabellenkopf- und Tabellenfußzeilen die Werte table-footer-group und table-header-group. Die display-Werte für ein Element zu verändern, führt manchmal zu interessanten und nützlichen Ergebnissen. Später werden wir noch sehen, wie man mit display: inline eine Liste horizontal anzeigen kann.

Schon hilfreicher kann der Einsatz des Werts none sein. Er führt dazu, dass ein Element vom Browser nicht beachtet wird. Es wird weder angezeigt noch wird ihm — wie mit der Eigenschaftsdefinition visibility: hidden — ein Platzhalter im Layout eingeräumt. Dies unterscheidet die Eigenschaft display: none von der Eigenschaft visibility: hidden, die den Raum für das verborgene Element reserviert.

  

<< zurück

vor >>