Bild neben Text, mehrere untereinander

[heiko74]

Hallo,
was ist die beste HTML Struktur, wenn ich fogendes erreichen möchte:
Links soll ein Bild mit einer Bildunterschrift sein. Rechts daneben ein Text, der zum Bild gehört. Von diesen Bildern mit Text gibt es mehrere unterieinander, welche eine Schritt für Schritt Anleitung bilden.
Derzeit habe ich es wie folgt:

<div>
<dl>
<dd><img src="bild.jpg"....."></dd>
<dt>Bilduntertitel</dt>
</dl>
<p>Text zum Bild</p>
</div>

Ist das so in Ordnung? Eine Lösung ohne den umschließenden Container habe ich bisher nicht gefunden. Da aber Bild und Text auch eine logische Einheit bilden erscheint mir der Container auch als Sinnvoll. Aber die Definitionsliste gefällt mir nicht so ganz. Das ist glaube ich nicht der beste Weg. Ich wollte aber nicht noch einen Container für Bild und Untertitel. Kennt jemand eine wirklch saubere Lösung?

Gruß
Heiko

 

[Efchen]

Also für Bild mit Untertitel ist die Definitionsliste der beste und übliche Weg.
Aber noch eine zweite Definition zum Bild...hmm...

Ich würde vermutlich jetzt den "Text zum Bild" mit ins <dt> einbauen und das dann per CSS trennen.

 

[heiko74]

Hallo,

Also für Bild mit Untertitel ist die Definitionsliste der beste und übliche Weg.

Hätt ich jetz nicht gedacht, aber gut, kann ich das ja so lassen.

Aber noch eine zweite Definition zum Bild...hmm...
Ich würde vermutlich jetzt den "Text zum Bild" mit ins <dt> einbauen und das dann per CSS trennen.

Nein, keine weitere Definition, sondern ein längerer Text, der auch aus mehreren Absätzen besteht.

So wie hier, nur da ist es noch mit Tabellen gelöst:
Die Ziehklinge

Gruß

Heiko

 

[Efchen]

Das ist ja wieder was anderes. Vor allem würde ich da keine Liste nehmen, weil Du ja keine Liste von Bildern hast. Eine Liste mit einem Element ist für mich keine Liste.

<div class="einzelschritt">
  <div class="spalte1">
    <img src="bild" alt="Richtiger Alternativtext" />
    <p>Bildbeschreibung</p>
  </div>
  <div class="spalte2">
    <h4>Benötigtes Werkzeug</h4>
    <p>Sie brauchen nicht viele Werkzeuge...</p>
    <p>Bei der Flachfeile...</p>
  </div>
</div>
...

Und dann weiter mit dem nächsten Einzelschritt. Das Aussehen des "einzelschritt" ist so definiert, dass in "spalte1" immer ein Image kommt, in "spalte2" der erklärende Text. Durch die Gruppierung in "einzelschritt"e erreicht man, dass die Images bündig mit dem erklärenden Text stehen.

 

[heiko74]

Hallo efchen,

ich habs noch ein wenig vereinfachen können:

<div>
  <div class="bildlinks">
        <a href="[URL="http://www.html.de/view-source:http://localhost/heiko-rech/moebelbau/bilder/komode2_g.jpg"]bilder/komode2_g.jpg[/URL]">
            <img src="[URL="http://www.html.de/view-source:http://localhost/heiko-rech/moebelbau/bilder/komode2.jpg"]bilder/komode2.jpg[/URL]" width="" height="" alt="" Title="">
        </a>
      <p>Text</p>
  </div>    
  <p>
    Text
  </p>
</div>

Bedingt durch meine Struktur, brauche ich nur eine Klassenzuordnung beim DIV für die Bilder. Funktioniert soweit sehr gut. Der Text umfließt die Bilder, was soweit in Ordnung ist.

Ich glaub so lass ich es.

Gruß

Heiko

 

[Efchen]

Also auf der von Dir verlinkten Seite war aber rechts neben den Bildern mehr als nur ein einziger Textabsatz. Da waren mehrere, auch mit Überschrift. Wenn Du natürlich nur einen Absatz hast, dann stimmt das so und Du brauchst kein div drumrum, aber mach nicht den Fehler, innerhalb dieses Absatzes dann <br> einzusetzen, obwohl Du eigentlich nur mehrere Absätze willst.

 

[heiko74]

Hallo,

Also auf der von Dir verlinkten Seite war aber rechts neben den Bildern mehr als nur ein einziger Textabsatz. Da waren mehrere, auch mit Überschrift. Wenn Du natürlich nur einen Absatz hast, dann stimmt das so und Du brauchst kein div drumrum

Ich habe die Formatierung so gemacht, dass das DIV umflossen wird. Bisher funktioniert das sehr gut, auch mit mehreren Absätzen, Überschriften und Aufzählungen. Sieht im FF, im IE und Opera alles gut aus.

Ich denke, dass ich zum Jahreswechsel fertig bin, dann gibts das Ganze zu sehen. Dann ist auch eine Beurteilung einfacher, als mit einem Codeschnipsel.

, aber mach nicht den Fehler, innerhalb dieses Absatzes dann <br> einzusetzen, obwohl Du eigentlich nur mehrere Absätze willst.

Nö, <br> gibts auf der neuen Seite nur sehr sehr selten.

Gruß

Heiko