Das große Adventskalender Gewinnspiel 2018 für Gamer & Technikfreunde
Internet Tutorials

Bildunterschrift mit HTML

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:

Definitonsliste für Bildbeschreibung nutzen

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:

Definitonsliste für Bildbeschreibung nutzen

 

Ich hoffe euch hat dieser simple Codetipp geholfen und ich würde mich freuen wenn ihr mir verratet, wie ihr eure Bildbeschreibungen macht! 😉

Tags

Simon Lüthje

Ich bin der Gründer dieses Blogs und interessiere mich für alles was mit Technik zu tun hat, bin jedoch auch dem Zocken nicht abgeneigt. Geboren wurde ich in Hamburg, wohne nun jedoch in Berlin.

Ähnliche Beiträge

2 Kommentare

    1. Ah, danke für den Hinweis. Der Artikel ist schon ewig online und noch nie hat es jemand gemerkt oder zumindest was gesagt. 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Close