Du möchtest deinen Internetauftritt ein wenig aufmotzen und deshalb deinen Bildern eine Bildunterschrift hinzufügen? Ich zeige dir eine einfache Möglichkeit, wie das realisiert werden kann.
HTML-Teil der Bildunterschrift
Es wird einfach eine Definitionsliste erstellt, bei der die Bildunterschrift dann der beschreibende Teil ist.
<dl class="bildunterschrift"> <dt><img src="bildname.jpg" alt="Bildbeschreibung" title="Bildbeschreibung"></dt> <dd>Bildunterschrift</dd> </dl>
Das sieht jetzt zum Beispiel so aus:
Dabei ist jedoch anzumerken, dass die Beschreibung nicht mittig unter dem Bild erscheint, wie es hier aussieht, sondern einfach ein paar Pixel eingerückt ist, deshalb müssen wir diese noch nach unseren Wünschen formatieren.
CSS-Teil der Bildunterschrift
Das hier ist nur ein Beispiel, wie man es machen könnte. Dabei wird die Bildbeschreibung dann immer links unter dem Bild angezeigt.
dl.bildunterschrift {float: left; margin:10px 10px 10px 0;}
dl.bildunterschrift dd {margin:0; font-size:90%;}
Hier auch wieder ein Beispiel, wie es mit dieser Formatierung nun aussehen würde:
Ich hoffe euch hat dieser simple Codetipp geholfen und ich würde mich freuen wenn ihr mir verratet, wie ihr eure Bildbeschreibungen macht! 😉
