Topics / CSS / ID: 83

Bildunterschriften

Viele Zeitschriften und Magazine leben von ihren Bildern. Im Zusammenhang mit der Bildunterschrift entscheidet der Leser, ob er diesen Artikel liest oder nicht.

Abb. 1: Diese Abbildung zeigt eine Grafik zum Thema Barrierefreiheit.

Da es dem W3C nie in den Sinn gekommen ist einen Tag für Bildunterschriften zu kreieren, musste jetzt eine Lösung her, die auch einen semantischen Zusammenhang zwischen Bild und Bildunterschrift herstellt. Einige werden sagen, dass das alt-Attribut dafür vorgesehen ist. Dieses ist im großen und ganzen auch richtig, aber nicht alle Browser stellen den Inhalt des alt-Attribut dar.

Eine bessere Lösung bietet das <dl>-Konstrukt. dl steht für Definitionsliste, sie ist eine elegante Erweiterung der untergeordneten Listen. Den Elementen der Liste werden nicht einfach Listensysmbole vorangestellt, sondern ein Begriff.   

Hier das Listing zu Abb. 1

1. <dl class="imgleft" style="width:193px;">
2. <dt><img src="barrierlogo.jpg" width="193" height="162" alt="Grafik: Barrierelogo" /></dt>
3. <dd>Abb. 1: Beschriftung der Grafik</dd>
4. </dl>

Mit CSS wird die Definitionsliste noch optisch aufbereitet. Da sind der Fantasie keine Grenzen gesetzt. Hier die Stylesheet Angaben für unser Beispiel:

1. dl.imgleft { float: left; margin-right: 1em; }
2. dt.imgleft { margin-bottom:0; }
3. dd.imgleft { margin:0; }

eingestellt am: 25.10.2005  (1817 mal gelesen)

 Druckansicht | Übersicht CSS | zurück