bugge: span nicht breiter als div

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ß

  1. 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.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. @@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'

      --
      Volumen einer Pizza mit Radius z und Dicke a: pi z z a
      1. 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.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. @@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'

          --
          Volumen einer Pizza mit Radius z und Dicke a: pi z z a
  2. @@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
    
    1. 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.

      1. @@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'

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

          elem.firstChild.width

          im IE ebenfalls möglich, so ganz stylelos?