span nicht breiter als div

[bugge]

Hallo,

ich habe folgende Struktur für meine Bilderanzeige:

<div class="pic">
  <img src=""><br>
  <span>
    Bilderunterschrift
  </span>
</div>

Wie bekomme ich es hin, dass das Div so breit ist wie das Bild (Größe der Bilder variabel) und der Text in der Span automatisch umgebrochen wird, sodass er nicht Breiter wird als das Bild?

Danke und Gruß

[Felix Riesterer]

Liebe(r) bugge,

<div class="pic">
  <img src=""><br>
  <span>
    Bilderunterschrift
  </span>
</div>

IIIIEEEEHHHH!!!

Probiere es damit:

<p class="illustration">  
    <img src="" alt="" />  
    Bildunterschrift  
</p>

Nun vergibst Du eine feste(!) Breite für Textabsätze mit dieser Klasse, und dass der Text darin zentriert sein soll. Das Bild setzt Du auf display:block und den rechten und linken margin auf "auto".

Eine automatische Breite, die sich nur an der Grafik orientiert ist mit reinen CSS-Mitteln nicht möglich. Sollte der Text breiter werden, würde auch der Container breiter gemacht, daher mein Vorschlag mit der festen Breite.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

Eine automatische Breite, die sich nur an der Grafik orientiert ist mit reinen CSS-Mitteln nicht möglich.

Sag niemals nie!

Qapla'

[Felix Riesterer]

Lieber Gunnar,

Eine automatische Breite, die sich nur an der Grafik orientiert ist mit reinen CSS-Mitteln nicht möglich.

Sag niemals nie!

wo habe ich "nie" gesagt? Und ob das Konzept mit display:table-cell wie gewünscht funktioniert, bezweifle ich.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

Und ob das Konzept mit display:table-cell wie gewünscht funktioniert, bezweifle ich.

Die Zweifel sind berechtigt. Webkits und Opera stellen den Text breiter dar als das Bild.

Qapla'

[Gunnar Bittersmann]

@@bugge:

nuqneH

<div class="pic">
  <img src=""><br>
  <span>
    Bilderunterschrift
  </span>
</div>

Wie bekomme ich es hin, dass das Div so breit ist wie das Bild (Größe der Bilder variabel) und der Text in der Span automatisch umgebrochen wird, sodass er nicht Breiter wird als das Bild?

Browser haben die Eigenschaft, Tabellenzellen zu vergrößern, so dass ihr Inhalt angezeigt wird. Wenn also die Breite des 'div' auf 0 gesetzt wird und es eine Tabellenzelle ist, dann wird es so breit wie die Grafik. (Es sei denn, das längste Wort im Text ist noch breiter.)

IE < 8 kriegen das mit der Tabellenzelle nicht gebacken, da kann man aber mit JavaScript (als CSS-Expression) nachhelfen: Breite des Bildes auslesen und dem 'div' zuweisen.

div.pic  
{  
  display: table-cell;  
  width: 0;  
  width: expression( [code lang=javascript](new Function('elem', '[code lang=javascript]elem.style.width = elem.firstChild.width + "px";
~~~'))(this)[/code] );  
}[/code]  
  
Für IE ohne JavaScript sollte man vielleicht noch eine sinnvolle Breite setzen.  
  
Qapla'

-- 
Volumen einer Pizza mit Radius z und Dicke a: pi z z a

[gast42]

bei diesem Quelltext

<div class="pic">
  <img src=""><br>
  <span>
    Bilderunterschrift
  </span>
</div>

wäre

elem.firstChild

das Leerzeichen zwischen div und img

elem.firstChild.width

Dass ein Textknoten eine Eigenschaft width hat wäre mir neu.

[Gunnar Bittersmann]

@@gast42:

nuqneH

bei diesem Quelltext

<div class="pic">
  <img src=""><br>
  <span>
    Bilderunterschrift
  </span>
</div>
wäre

elem.firstChild

das Leerzeichen zwischen div und img

Nein, nicht im IE. Und das JavaScript ist ja nur für die4sen.

Qapla'

[gast42]

ist

elem.firstChild.width

im IE ebenfalls möglich, so ganz stylelos?