Peter: Bild mit Unterschrift ohne Tabelle

Hallo,
wie erreiche ich, dass unter einem Bild ein beschreibender Text steht?
Falls nur ein Bild pro "Zeile" ist es ja trivial, aber wenn mehrere Bilder nebeneinander stehen sollen?
Thanks
Peter

  1. @@Peter:

    nuqneH

    wie erreiche ich, dass unter einem Bild ein beschreibender Text steht?

    Mit dem entsprechendem Markup.

    Falls nur ein Bild pro "Zeile" ist es ja trivial, aber wenn mehrere Bilder nebeneinander stehen sollen?

    Dann sorgst du per CSS (Breitenangabe, float oder inline-block) dafür, dass die figures nebeneinander passen – bei genügend großem Anzeigebereich, sonst untereinander.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

      Dann sorgst du per CSS (Breitenangabe, float oder inline-block) dafür, dass die figures nebeneinander passen – bei genügend großem Anzeigebereich, sonst untereinander.

      Ergänzung: figure-Elemente dürfen auch geschachtelt werden, etwa um Entwicklungsstufen zu zeigen.

      <figure>  
        <figure>  
          <img src="" alt="Raupe">  
          <figcaption>Raupe …</figcaption>  
        </figure>  
        
        <figure>  
          <img src="" alt="Puppe">  
          <figcaption>Puppe …</figcaption>  
        </figure>  
        
        <figure>  
          <img src="" alt="Falter">  
          <figcaption>Falter …</figcaption>  
        </figure>  
        
        <figcaption>Entwicklungsstadien eines Kohlweißlings</figcaption>  
      </figure>
      

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Ei und Eichel.

      1. @@Matthias Apsel:

        nuqneH

        Ergänzung: figure-Elemente dürfen auch geschachtelt werden, etwa um Entwicklungsstufen zu zeigen.

        Was sich auch durchaus so auszeichnen lässt:

        <table>  
          <caption>Entwicklungsstadien eines Kohlweißlings</caption>  
          <tbody>  
            <tr>  
              <td>  
                <img src="" alt="Raupe">  
              </td>  
              <td>  
                <img src="" alt="Puppe">  
              </td>  
              <td>  
                <img src="" alt="Falter">  
              </td>  
            </tr>  
          </tbody>  
          <tfoot>  
            <tr>  
              <th>Raupe …</th>  
              <th>Puppe …</th>  
              <th>Falter …</th>  
            </tr>  
          </tfoot>  
        </table>
        

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. @@Gunnar:

          Was sich auch durchaus so auszeichnen lässt:

          <table>
          ....
          /table>

          Habe ich die bisherigen Threads in selfhtml falsch verstanden, wo tables nur empfohlen werden, wenn "echte" Tabellen?
          
          1. Habe ich die bisherigen Threads in selfhtml falsch verstanden, wo tables nur empfohlen werden, wenn "echte" Tabellen?

            Ist doch eine echte Tabelle, die verschiedenen Zelleninhalte stehen in einer direkten Beziehung zu einander.

            Noch auffälliger würde es werden, wenn man mehr als einen Datensatz hat, dann müsste man aber caption- und tfoot-Elementinhalte anpassen.

            MfG
            bubble

            --
            If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
    2. Hallo,
      ich habe jetzt folgendes gemacht:

      <figure style="float: left; max-width: 100%">  
        <img src="/fotos/f1.jpg" alt="...">  
        <figcaption>  
          Das Bild zeigt .....  
        <figcaption>  
      </figure>  
      <figure style="float: right; max-width: 100%">  
        <img src="/fotos/f2.jpg" alt=".....">  
        <figcaption>  
          Das Bild .........  
        <figcaption>  
      </figure>
      

      (Ich weiß, dass die Style-Angaben in das CSS gehören)
      Damit werden beide Bilder nebeneinander dargestellt und wie von mir gewünscht am linken/rechten Rand ausgerichtet.
      Wenn ich nun aber das Fenster verkleinere, werden die Bilder untereinander dargestellt, leider aber durch die float-Angaben nicht direkt untereinander.
      Erst wenn die Seite so klein wird, dass es nicht mehr anders geht, sind die beiden Bilder bündig untereinander.
      Wie kann ich also erreichen, dass die Bilder, wenn sie untereinander dargestellt werden, zentriert untereinander stehen?
      Danke
      Peter

      1. Om nah hoo pez nyeetz, Peter!

        Wenn ich nun aber das Fenster verkleinere, werden die Bilder untereinander dargestellt, leider aber durch die float-Angaben nicht direkt untereinander.

        Warum float left und right? Was bewirkt float eigentlich? Informiere dich!

        Wie kann ich also erreichen, dass die Bilder, wenn sie untereinander dargestellt werden, zentriert untereinander stehen?

        Das hängt auch von deinem Drumrum ab. display: inline-block oder table-cell in verbindung mit text-align könnte helfen.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wunde und Wunderhorn.

        1. Hallo Matthias und andere,

          Das hängt auch von deinem Drumrum ab. display: inline-block oder table-cell in verbindung mit text-align könnte helfen.

          Beim Studieren des "inline-block" bin ich auf
          «inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss - ähnlich einem "inline replaced element" wie img»
          gestoßen.
          Wenn ich aber nach "inline replaced element" suche finde ich immer sinngemäß nur
          'verhält sich wie "inline replaced element"', nicht aber eine Erläuterung selbst.
          Was bedeudet "inline replaced element" und wie wird es definiert?
          Gruß
          Peter

          1. Om nah hoo pez nyeetz, Peter!

            Wenn ich aber nach "inline replaced element" suche finde ich immer sinngemäß nur
            'verhält sich wie "inline replaced element"', nicht aber eine Erläuterung selbst.
            Was bedeudet "inline replaced element" und wie wird es definiert?

            Ersetzte Elemente sind solche, deren Darstellung (erstmal) nicht im Verantwortungsbereich von CSS liegt. Ein Bild beispielsweise bringt seine eigenen Größenangaben mit.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen voll und Volleyball.

  2. Hello Peter,

    wie erreiche ich, dass unter einem Bild ein beschreibender Text steht?
    Falls nur ein Bild pro "Zeile" ist es ja trivial, aber wenn mehrere Bilder nebeneinander stehen sollen?

    Ich hatte diese Frage neulich schon mal gestellt hier.

    Da die figure-Auszeichnungen erst ab CSS 3.0 unterstützt werden, habe ich

    <dl>
        <dt><image ...></dt>
        <dd>Caption zum Bild</dd>
        <dd>Beschreibung zum Bild</dd>
    </dl>

    benutzt. Das ist laut Gunnar zwar semantisch nicht ganz richtig, ich persönlich denke aber, dass es auch nicht ganz falsch ist.

    Eine Tabelle halte ich nur für wirklich tabellarische Darstellungen für angemessen. Da sieht dann also jede Zeile wie die andere aus. Tabelle in Tabelle ist eigentlich schon ein Bruch dieser Forderung. Und unterschiedliche "Satzarten" (also verschieden organisierte Zeilen) passen da auch nicht wirklich rein.

    Bei der Definition-List kann man jedenfalls wunderschön mit CSS herumhantieren und auch die Anordnungen für die einzelnen Elemente gut steuern.

    Liebe Grüße aus dem schönen Oberharz

    Tom vom Berg

    --
     ☻_
    /▌
    / \ Nur selber lernen macht schlau
    http://restaurant-zur-kleinen-kapelle.de
    1. Hallo,

      Da die figure-Auszeichnungen erst ab CSS 3.0 unterstützt werden, ...

      da bringst du wohl irgendwas durcheinander. Du meinst vermutlich: Ab HTML 5.
      CSS ist vom Prinzip her so universell, dass es mit jedem Markup kombinierbar ist.

      Ciao,
       Martin

      --
      Gültig sind Frauen ab 16, wohlgeformt ab 160 Pfund.
        (Gunnar Bittersmann)
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      1. @@Der Martin:

        nuqneH

        Da die figure-Auszeichnungen erst ab CSS 3.0 unterstützt werden, ...

        da bringst du wohl irgendwas durcheinander.

        Ja, das tut er.

        Du meinst vermutlich: Ab HTML 5.

        Eher: Schon immer. Browser habe immer schon Style-Angabe auch auf ihnen unbekannte Element angewandt. Außer alte IEs, denen man mit Shim (document.createElement) auf die Sprünge helfen muss.

        CSS ist vom Prinzip her so universell, dass es mit jedem Markup kombinierbar ist.

        Ja, mit jeglichem XML. Bei SVG wird davon auch reger Gebrauch gemacht. Theoretisch auch mit anderem Markup als XML- oder SGML-Formaten.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hallo,

          Da die figure-Auszeichnungen erst ab CSS 3.0 unterstützt werden, ...
          Du meinst vermutlich: Ab HTML 5.
          Eher: Schon immer.

          nein, ich wollte auf den Punkt hinaus, dass das figure-Element erst ab HTML 5 existiert, aber unabhängig von CSS.

          Ciao,
           Martin

          --
          Mir geht es gut. Ich mag die kleinen Pillen, die sie mir dauernd geben.
          Aber warum bin ich ans Bett gefesselt?
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          1. @@Der Martin:

            nuqneH

            nein, ich wollte auf den Punkt hinaus, dass das figure-Element erst ab HTML 5 existiert, aber unabhängig von CSS.

            Und ich wollte darauf hinaus, dass sich das figure-Element nicht erst in Browsern mit HTML5-Parser stylen lässt, sondern in auch in äteren. Genauso wie das husseldiguggeldu-Element.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. @@Tom:

      nuqneH

      <dl>

      <dt><image ...></dt>
          <dd>Caption zum Bild</dd>
          <dd>Beschreibung zum Bild</dd>
      </dl>

        
      dl ist spätestens dann ungeeignet, wenn es um mehrere Bilder geht (also in diesem Fall), da es in HTML immer noch kein gruppierendes di-Element für zusammengehörige th-/td-Elemente gibt.  
        
      Und BTW, das HTML-Element heißt img, nicht image.  
        
      Mit  
        
      ~~~html
      <dl>  
          <dt><img ...></dt>  
          <dd>Caption zum ersten Bild</dd>  
          <dd>Beschreibung zum ersten Bild</dd>  
          <dt><img ...></dt>  
          <dd>Caption zum nächsten Bild</dd>  
          <dd>Beschreibung zum nächsten Bild</dd>  
      </dl>
      

      wird sich kaum das gewünschte Layout erzielen lassen.

      <dl>  
          <dt><img ...></dt>  
          <dd>Caption zum ersten Bild</dd>  
          <dd>Beschreibung zum ersten Bild</dd>  
      </dl>  
      <dl>  
          <dt><img ...></dt>  
          <dd>Caption zum nächsten Bild</dd>  
          <dd>Beschreibung zum nächsten Bild</dd>  
      </dl>
      

      wäre semantischer Unfug, da es sich um *eine* Liste handelt.

      <dl>  
          <di>  
              <dt><img ...></dt>  
              <dd>Caption zum ersten Bild</dd>  
              <dd>Beschreibung zum ersten Bild</dd>  
          </di>  
          <di>  
              <dt><img ...></dt>  
              <dd>Caption zum nächsten Bild</dd>  
              <dd>Beschreibung zum nächsten Bild</dd>  
          </di>  
      </dl>
      

      wäre die Gruppierung, die es in HTML nicht gibt, weil Hixie sich stur gestellt hat.

      Vielleicht führt über die W3C-Gruppe ein Weg, das in HTML5.1 einzuführen?

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)