Text nur unterhalb eines Bildes - wenn nötig Zeilenumbruch

[Gast]

Hallo,

ich versuche mich gerade erfolglos an folgendem Setup:

Ich habe zwei Bilder nebeneinander und möchte zu beiden eine Fussnote erfassen. Der Text beider Fussnoten ist aber länger als das jeweilige Bild breit ist sodass der Text unter dem Bild entsprechend umbrechen müsste.

Kann man sowas mit CSS-Mitteln überhaupt lösen?

Mein aktueller Stand:

  
<span>  
   <img src="bild1.png" style="float: bottom"/>  
   <span class="klein">jede menge text der unter dem bild stehen soll</span>  
</span>  
<span>  
   <img src="bild2.png" style="margin-left: 10px"/>  
   <span class="klein">wieder ganz viel Text der nur unter diesem Bild stehen soll</span>  
</span>  

Danke im Voraus.

[Linuchs]

Kann man sowas mit CSS-Mitteln überhaupt lösen?

Ich bestimme einen Rahmen um das Bild, das Bild ist darin 100% breit und der Text bricht um:

.bo {  
  width: 6em;  
  max-width: 6em;  
  border: 1px solid #ccf;  
}  
.bo img {  
  width: 100%;  
  display: block; /* elimiert die Unterlänge, die ein Bild als TExt hat */  
}  

<div class=bo>  
  <img src="irgendein_logo.gif" />  
  Dieses Logo wird hier im Text ganz genau beschrieben, auch die Farbe.  
</div>  

Linuchs

[Auge]

Hallo

<div class=bo>

<img src="irgendein_logo.gif" />
  Dieses Logo wird hier im Text ganz genau beschrieben, auch die Farbe.
</div>

  
Attributwerte, die nicht ausschließlich aus Ziffern bestehen, sind in Anführungszeichen zu setzen. Der Fehler wäre vermeidbar gewesen.  
  
Zudem gibt es was Neues™! Nennt sich HTML5 und stellt die bei weitem aussagekräftigeren Elemente `figure`{:.language-html} und `figcaption`{:.language-html} bereit.  
  
~~~html
<figure class="bo">  
  <img src="irgendein_logo.gif" />  
  <figcaption>Dieses Logo wird hier im Text ganz genau beschrieben, auch die Farbe.</figcaption>  
</figure>

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Attributwerte, die nicht ausschließlich aus Ziffern bestehen, sind in Anführungszeichen zu setzen.

Das stimmt weder für HTML 4 noch für HTML5.

Der Fehler wäre vermeidbar gewesen.

Ja, durch Blick in die Specs. →Hier entlang

Qapla'

[Auge]

Hallo

Attributwerte, die nicht ausschließlich aus Ziffern bestehen, sind in Anführungszeichen zu setzen.

Das stimmt weder für HTML 4 noch für HTML5.

Hmm, für HTML4 hatte ich angenommen, dass es stimmt. Falsch gelegen.

Der Fehler wäre vermeidbar gewesen.

Ja, durch Blick in die Specs. →Hier entlang

„Hier entlang“ ist es ein Umweg. Aber wen solltest du auch zitieren, wenn nicht dich selbst.

Tschö, Auge

[Matthias Apsel]

Om nah hoo pez nyeetz, Linuchs!

Kann man sowas mit CSS-Mitteln überhaupt lösen?

Ich bestimme einen Rahmen um das Bild, das Bild ist darin 100% breit und der Text bricht um:

Ja, und verwende dabei auch die semantisch korrekten Elemente figure und figcaption.
http://wiki.selfhtml.org/wiki/Figure, http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_präsentieren

Matthias

[Gast]

Danke, funktioniert für jedes der beiden Bilder schon sehr gut. Einziges Problem: Das 2. Bild bricht um, ich hätte die beiden aber gern nebeneinander. Gibts dafür auch noch eine Lösung?

Habs schon mit <nobr> probiert, aber das verhindert lediglich den Umbruch des Textes.
Auch ein umschließendes <div style="white-space: nowrap;"> bringt keinen Erfolg...

[Gast]

Danke, funktioniert für jedes der beiden Bilder schon sehr gut. Einziges Problem: Das 2. Bild bricht um, ich hätte die beiden aber gern nebeneinander. Gibts dafür auch noch eine Lösung?

Habs schon mit <nobr> probiert, aber das verhindert lediglich den Umbruch des Textes.
Auch ein umschließendes <div style="white-space: nowrap;"> bringt keinen Erfolg...

Hat hierzu noch jemand einen Hinweis?
Danke im Voraus.

[JürgenB]

Hallo Gast,

Habs schon mit <nobr> probiert, aber das verhindert lediglich den Umbruch des Textes.
Auch ein umschließendes <div style="white-space: nowrap;"> bringt keinen Erfolg...

Hat hierzu noch jemand einen Hinweis?

schon mal statt display:block display:inline-block probiert?

Gruß, Jürgen

[JürgenB]

Hallo JürgenB,

Habs schon mit <nobr> probiert, aber das verhindert lediglich den Umbruch des Textes.
Auch ein umschließendes <div style="white-space: nowrap;"> bringt keinen Erfolg...

Hat hierzu noch jemand einen Hinweis?

schon mal statt display:block display:inline-block probiert?

sorry, display:inline-block muss auf das äußere Element (bo) angewendet werden.

Gruß, Jürgen

[MrMurphy]

Hallo,

ich würde das Problem mit figure, figcaption und Flexbox lösen:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_11_10_gast_01_bilder_mit_text.html

Ein großer Vorteil ist, das sich die Höhe einer "Zeile", in diesem Fall von figure, immer der Box mit dem größten Inhalt anpasst und so auch problemlos ein responsive Design erstellen läßt:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_11_10_gast_02_bilder_mit_text.html

Gruss

MrMurphy