Experimente mit display

HTML unterscheidet zwischen Block- und inline Elementen. Erstere, zu denen <p>, <h> und <div> gehören, erzeugen einen eigenen Absatz, während die anderen auch innerhalb eines Satzes einsetzbar sind, da sie keinen Zeilenumbruch bewirken, wie <a>, <img> und <span>.

Dieses Verhalten kann man jedoch mit Hilfe der CSS-Eigenschaft display umdefinieren. Im Folgenden probierte ich das an einigen Beispielen, wo dieses sinnvoll sein kann. Das ist natürlich nur in neueren Browsern wirksam, Netscape 4, ältere IEs und Operas ignorieren die Angaben.

Die Styles der Beispiele sind direkt im Quelltext festgelegt und können dort eingesehen werden. Normalerweise erfolgt die Definition natürlich im Stylesheet.

 

display: inline

 

Überschrift

gefolgt von Text

 

Hier wurde die <h2>-Überschrift als inline definiert, so dass der darauf folgende Text ohne einen Zeilenumbruch daneben zu stehen kommt.

<h2 style="display:inline">Überschrift </h2> gefolgt von Text

Eine weitere Einsatzmöglichkeit ist es, Aufzählungen neben statt unter einander zu setzen. Hier ein Beispiel mit (Pseudo-)Links:

Der Code dazu ist folgender, aus Platzgründen jedoch ohne das padding, das die Elemente auf Abstand hält:

<ul>
  <li style="display:inline"><a href="#">Link 1</a></li>
  <li style="display:inline"><a href="#">Link 2</a></li>
  ...
</ul>

Durch das display:inline fallen übrigens auch die listentypischen Bullet-Markierungen vor den Elementen weg.

 

display: block

Das genaue Gegenteil dazu ist, dass man Elemente, die normalerweise neben einander stehen, dazu bringt, jeweils einen Zeilenumbruch zu erzeugen. Das spart bei folgender Linkliste den Einsatz mehrerer <br />.

Link 1 Link 2 Link 3 Link 4

Der Quelltext dazu:

<a style="display:block" href="#">Link 1</a>
<a style="display:block" href="#">Link 2</a>
...

Ein weiterer Vorteil ist, dass auf diese Weise der Link über die gesamte Zeile geht und damit klick-sensitiv ist, während die Unterstreichung auf den Linktext beschränkt bleibt. Auch für hover-Effekte kann dieses Verhalten manchmal interessant sein.

 

display: none

Diese display-Eigenschaft lässt das Element vollständig vom Bildschirm verschwinden, die folgenden Elemente rücken dabei auf den frei gewordenen Platz auf. Natürlich können damit nur die neueren Browser etwas anfangen. Dieses Verhalten kann man ausnutzen, um etwa Benutzer des alten Netscape 4 darauf hinzuweisen, dass sie mit dem CSS der Webseite wohl einige Schwierigkeiten haben werden.

<p style="display:none">Liebe Nutzer von Netscape 4: 
Wenn euer Browser diesen Text anzeigt, dann .....</p>

Ein weiterer Einsatz dieser Eigenschaft sind die beliebten Ausklapp-Menüs. Die Untermenüpunkte sind zunächst mit display:none verborgen und werden erst bei Mausklick oder bei einfacher Mausberührung mit display:block angezeigt.

 

weitere display-Eigenschaften

In CSS3 sind weitere Möglichkeiten von display definiert, die jedoch vom Internet Explorer bisher nur unvollständig unterstützt werden und damit in der Praxis vorläufig keine Rolle spielen können. Weiteres dazu bei SelfHTML.