Dossiers >> Web-Publishing >> Tipps und Tricks >> CSS: Bild mit Legende umfliessen lassen

CSS: Bild mit Legende umfliessen lassen

(msc) Ein Bild mit zugehöriger Legende soll von Text umflossen werden – eine alltägliche Sache, die sich aber mit HTML-Mitteln nicht so richtig befriedigend lösen lässt. Unbefriedigend ist vor allem, dass es keinen wirklich guten Weg gibt, die enge Verbindung zwischen Bild und Bildbeschreibung strukturell im HTML-Code zu verankern.

Eine Lösung dieses Dilemmas ist der «Missbrauch» einer Definitionsliste (dieser Webtag ist in der Publisher-Ausgabe 3-06 beschrieben). So kann man, mit wenig CSS-Tricks, ein Bild wunschgemäss im Bild platzieren:

Diesen Artikel als PDF ansehen/downloaden

Das ist die Stildefinition (die margin-left-Deklaration ist nötig, weil die Bildlegende sonst eingerückt wäre):

dd {margin-left:0px; margin-top:4px; font-weight: bold;}

dl {float:left;margin-right:10px}

Und das der HTML-Code:

<dl><dt><img scr="Bild.jpg"></dt><dd>Ein lustiges Bild mit politischer Aussage</dd></dl>

Eine noch einfachere Lösung für Bildunterschriften bietet sich mit den Pseudo-Elementen after und content. Über content ist es möglich, an der angegebenen Stelle einen Inhalt einzufügen. Und attr(title) gibt vor, dass der einzufügende Text das title-Attribut des Bildes ist, also jenes Element, das man gemäss den Empfehlungen sowieso verwenden sollte. Über after geben wir an, dass der eingefügte Text am Ende des Img-Elements erscheinen muss. Um zwischen Bild und Bildlegende einen Zeilenumbruch zu erwirken, verwenden wir "A":

img.fl:after {content:"A"attr(title);}

So werden mit der Klasse fl ausgestattete Bilder automatisch mit Bildlegende angezeigt:

<img src="Bild.jpg" class="fl" title="Ein lustiges Bild mit einer politischen Aussage">

Allerdings zeigt nur Opera solche Bilder korrekt an; Internet Explorer und Firefox kommen damit nicht zurecht.

Diesen Artikel als PDF ansehen/downloaden