"Bildunterschrift"

[Guillermo]

Hallo,

Auf vielen Seiten, etwa auch unter
http://news.bbc.co.uk/2/hi/asia-pacific/3052574.stm
habe ich einen Text unter Bildern gesehen, der den Inhalt des Bildes erklärt.

Bei oben genannter Adresse hat man eine blinde Tabelle erstellt, die man lediglich mit einem Bild und dem Text zum Bild füllt und rechtsbündig ausrichtet.

Das klappt zwar. Ich frage mich aber, ob man soetwas nicht auch mittels html und CSS machen kann, ohne eine blinde Tabelle zu verwenden. Weiß jemand, ob soetwas irgendwie geht, etwa mit einem irgendwie formatierten div-Element?

Grüße
Guillermo

[Cheatah]

Hi,

Das klappt zwar. Ich frage mich aber, ob man soetwas nicht auch mittels html und CSS machen kann, ohne eine blinde Tabelle zu verwenden.

img[title]:after { display:block; content:attr(title); }

Funktioniert natürlich nur bei einem modernen Browser, also z.B. nicht beim IE.

Cheatah

[Orlando]

Hi Guillermo,

habe ich einen Text unter Bildern gesehen, der den Inhalt des Bildes erklärt.
Ich frage mich aber, ob man soetwas nicht auch mittels html und CSS machen kann, ohne eine blinde Tabelle zu verwenden. Weiß jemand, ob soetwas irgendwie geht, etwa mit einem irgendwie formatierten div-Element?

der Thread [pref:t=51422&m=282421] wird dich bestimmt interessieren, dort geht's genau darum.

Grüße,
 Roland

[molily]

Hallo, Guillermo,

Auf vielen Seiten, etwa auch unter
http://news.bbc.co.uk/2/hi/asia-pacific/3052574.stm
habe ich einen Text unter Bildern gesehen, der den Inhalt des Bildes erklärt. (...) Ich frage mich aber, ob man soetwas nicht auch mittels html und CSS machen kann, ohne eine blinde Tabelle zu verwenden. Weiß jemand, ob soetwas irgendwie geht, etwa mit einem irgendwie formatierten div-Element?

float http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float ist das Stichwort. Eine pragmatische Lösung ;):

<div class="illustration">
<img ... /> [oder] <object ...>...</object>
<div>Bildunterschrift</div>
</div>

.illustration {float:left; [oder] float:right; margin:...; ...}
.illustration img {...}
.illustration div {...}

Eventuell ist das innere div-Element überflüssig (sofern du die Styles angemessen zuweisen kannst), dann könnte das äußere div ein p-Element sein und das img vom Text über ein <br /> getrennt sein.

Für die Zukunft empfehle ich ebenfalls die Lösung mit der Visualisierung des title-Attributs (es stellt sich natürlich die Frage, ob es bei obiger Lösung sinnvoll ist, überhaupt ein title-Attribut anzugeben... strenggenommen könnte das Element darunter sogar via longdesc verlinkt werden).

Grüße,
Mathias