Bilder mit Unterschrift inline darstellen

[waflija]

Ich habe einen Text, in dem ich ein Bild mit Unterschrift darstellen will. Dies soll im Text dargestellt werden. (Keine feste Position, wie ein einzelnes <img> element)

Mein Ansatz: Beides in einem div bündeln.
<div style="display:inline;">
  <img src="meinbild.jpg">
  <br>
  <span>meine Bildunterschrift</span>
</div>

Das Problem ist jedoch, dass dieses Element trotzdem einen Zeilenumbruch erzeugt. Kann man dagegen etwas tun?

Wenn nein, was könnte ich alternativ machen um die Unterschrift immer unter dem Bild darzustellen?

[Felix Riesterer]

Liebe(r) waflija,

<div style="display:inline;">

Du suchst inline-block.

Liebe Grüße,

Felix Riesterer.

[Der Martin]

Hallo,

Ich habe einen Text, in dem ich ein Bild mit Unterschrift darstellen will. Dies soll im Text dargestellt werden. (Keine feste Position, wie ein einzelnes <img> element)
Mein Ansatz: Beides in einem div bündeln.

bis hierhin okay.

<div style="display:inline;">
  <img src="meinbild.jpg">
  <br>
  <span>meine Bildunterschrift</span>
</div>

So wirkt der Inhalt des div-Elements, als ob das div gar nicht da wäre. Es verhält sich neutral.

Das Problem ist jedoch, dass dieses Element trotzdem einen Zeilenumbruch erzeugt.

Nicht das div-Element, sondern das darin enthaltene br.

Kann man dagegen etwas tun?

Ja: Formatiere das div-Element als inline-block. Dann fließt es als Ganzes mit dem Text, bildet aber mit seinem eigenen Inhalt einen festen Block.

Wenn nein, was könnte ich alternativ machen um die Unterschrift immer unter dem Bild darzustellen?

Ich finde es seltsam, ein Bild mitsamt Bildunterschrift im Textfluss mitlaufen zu lassen, und kann mir im Moment keine Anwendung vorstellen, wo das sinnvoll erscheint ...

Ciao,
 Martin

[waflija]

Hi,

Ziel der Aktion ist folgendes:

B = Bild C = Unterschrift, | = Border M = Menu

M B B B B B B
M C C C C C C
M
M B B B B
M C C C C
M
  weiterer
  Content

B,C befinden sich jeweils in einem DIV Container mit "float:left" Eine Reihe ist wiederum ein Container "Zeile"

Problem: Der Umbruch nach der ersten Reihe. Selbst wenn ich float:left bein letzten entferne, entsteht folgendes.

M B B B B B  |
M C C C C C  |
M            |
M         B B|B B B
M          C C|C C C

Benutze ich clearfix oder ein platzhalter div mit "clear:both" rutscht die zweite Zeile ganz nach unten, unter das Menü.

Deshalb war meine letzte Idee, die Bilder und Beschriftung ohne eigene DIV-Container einzubauen, da dann der Zeilenumbruch kein Problem ist. Nur rutscht dann immer die Bildbeschriftung neben das Bild...

Hallo,

Ich habe einen Text, in dem ich ein Bild mit Unterschrift darstellen will. Dies soll im Text dargestellt werden. (Keine feste Position, wie ein einzelnes <img> element)
Mein Ansatz: Beides in einem div bündeln.

bis hierhin okay.

<div style="display:inline;">
  <img src="meinbild.jpg">
  <br>
  <span>meine Bildunterschrift</span>
</div>

So wirkt der Inhalt des div-Elements, als ob das div gar nicht da wäre. Es verhält sich neutral.

Das Problem ist jedoch, dass dieses Element trotzdem einen Zeilenumbruch erzeugt.

Nicht das div-Element, sondern das darin enthaltene br.

Kann man dagegen etwas tun?

Ja: Formatiere das div-Element als inline-block. Dann fließt es als Ganzes mit dem Text, bildet aber mit seinem eigenen Inhalt einen festen Block.

Wenn nein, was könnte ich alternativ machen um die Unterschrift immer unter dem Bild darzustellen?

Ich finde es seltsam, ein Bild mitsamt Bildunterschrift im Textfluss mitlaufen zu lassen, und kann mir im Moment keine Anwendung vorstellen, wo das sinnvoll erscheint ...

Ciao,
Martin

[Gunnar Bittersmann]

@@waflija:

nuqneH

Mein Ansatz: Beides in einem div bündeln.

Oh je.

Qapla'

[waflija]

@@waflija:

nuqneH

Mein Ansatz: Beides in einem div bündeln.

Oh je.

Qapla'

Hm.

HTML 5 - Noch nicht damit gearbeitet, sollte ich aber langsam mal.

folgendes ausprobiert:

  
<figure>  
  <img src="meinbild">  
  <figcaption>mein Text</figcaption>  
</figure>  

Allerdings behandelt mein Browser dies sehr ähnlich zur "DIV Suppe". Alles steht auch weiterhin untereinander. (Ohne das die Elemente in dem "Eltern" Div fließen und sich wie ein Text verhalten...)