renephoenix.de

Bildunterschriften

Gerrit schlägt vor, für Bildunterschriften eine Definitionsliste anzulegen, damit die Sache semantisch sauber ist. Diese Idee könnte ggf. etwas einfacher sein, da hier im HTML-Code nichts zusätzlich eingefügt werden muß, das alt-Tag aber ohnehin vorhanden sein sollte. Der folgende Code setzt eine Reihe von Bildern nebeneinander, während die Bildbeschreibung darunter erscheint.

img:after { content:attr(alt); 
display:block}
img {display:block;}
.h
{float:left; padding:10px;}

Um das Bild müßte ein <span>-Tag platziert werden. Ebenso müßte man sich bei der Variante Gedanken über width (damit ein Zeilenumbruch erfolgt) und height (damit float sauber auf die nächste Bilderreihe umbrechen kann) machen.

Ich habe dazu ein kleines Tutorial geschrieben, daß beide Varianten einmal gegenüberstellt. Es ist nicht perfekt – und kann gerne noch ergänzt und verbessert werden. Ich habe hier bewußt einen besonders komplizierten Fall verwendet, bei dem Hoch- und Querformat zum Einsatz kommt.

Update:

  • Auf Yubb kann man in diesem Tutorial diese Darstellungsweise schon betrachten.
  • Semantisch intelligenter ist anstelle des alt-Attributes title zu verwenden.

Nutzung des Artikels »Bildunterschriften« in Beiträgen

Der Artikel »Bildunterschriften« wird in keinem Objekt eingebunden.