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 />.
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.