[netspy]

Kennt jemand einen guten Weg, Bilder mit Bildunterschriften im Fließtext (rechts- / linksbündig, zentriert) einzubinden?

Folgende Lösung mit einer Definitionsliste hab ich mir mal ausgedacht, bin aber nicht so 100%ig davon überzeugt.

CSS

dl.image {
  border:1px solid #dcdcdc;
  padding:5px;
}
dl.image dt {
  margin:5px 0 0;
  text-align:center;
  font-weight:normal;
  font-size:0.8em;
}
dl.image dd {
  margin:0;
  text-align:center;
  font-size:0.7em;
}
dl.center {
  margin:5px auto 5px auto;
}
dl.left {
  margin:5px 10px 5px 0;
}
dl.right {
  margin:5px 0 5px 5px;
}

XHTML

<dl class="image right" style="width:270px;">
  <dd>[img]kings-cross.jpg[/img]</dd>
  <dt>Kings Cross Railway Station, London</dt>
</dl>

Beispiel: http://www.ego4u.de/de/read-on/count...budget-britain

Was haltet ihr von dieser Lösung? Bessere Vorschläge?

Mario

[i-fekt]

Einbinden über

mit Bildunterschrift in <span>.

Eine Liste ist auf jeden Fall falsch.

[Dr. Love]

Warum auf jeden Fall falsch? Weil es eine Liste mit nur einem Eintrag ist? Warum nicht?
Also mir gefällt die Idee dahinter, dass als zusammengehörig markiert wird, was zusammen gehört. Ich würde das spontan zwar auch nicht so machen, aber ich finde auf die Schnelle auch keinen triftigen Grund dagegen.

[Geronimo]

Das ist durchaus eine halbwegs logische Auszeichnung von Bildern mit Bildunterschrift. Auf den Alternativtext für das Bild solltest du aber möglichst verzichten, da der Text ja bereits in der Bildunterschrift zu finden ist und sonst ggf. von Screenreadern doppelt vorgelesen wird.

[E|H]

Ich hab' mal irgendwo eine Lösung gesehen, bei der mit :after und content der Alternativtext unter das Bild gesetzt wird.

Vielleicht war das sogar hier.

EDIT: Nein, war es nicht.

http://praegnanz.de/weblog/315/bildu...n-xhtml-update
http://praegnanz.de/download/bildunterschrift/

http://www.mediaevent.de/article.php...40926103515715

Anscheinend kann das mit dem Alternativtext als content nur Opera.

[netspy]

Also ein Absatz mit einem SPAN ist keine wirklich Alternative, da dort ja nichts sematisch zusammenpasst. Den Alternativtext als :content ist auch nicht die Lösung. Erstens ist die Browserunterstützung noch zu schwach und zweitens ist der Alternativtext ja nicht gleich mit einer Bildunterschrift. Evtl. könnte TITLE-Attribut noch dafür herhalten.

Ich werd dann wohl bei bei der Definitionsliste bleiben. Allerdings werde ich wie in dem Artikel von mediaevent.de das Bild in DT und die Bildunterschrift in DD setzen. Da hatte ich selbst etwas falsch gedacht. Danke für die Links.

Mario

[E|H]

Ich halte die Lösung mit der Definitionsliste auch für die Sinnvollste.

[Dieter]

Hier wäre wohl eher mal ein Fall für

und
gegeben!

p.foto {
text-lign: center;
}

[netspy]

Zitat von Dieter Krautkraemer

Hier wäre wohl eher mal ein Fall für

und
gegeben!

Damit bilden Bild und Bildunterschrift aber keine logische Einheit. Außerdem ist ein Bild ja eigentlich auch kein Absatz.

Mario

[Dieter]

Ich nehme an, Du möchtest das Bild so wie auf dieser Seite einbinden:http://www.koblenz-metternich.de/ver...anglerclub.php- wieso sollte dann ein

nicht korrekt sein?

Wenn ein Bild ein <dd> oder <dt> füllen darf, dann doch bestimmt auch ein

!