Gunnar Bittersmann: Bilder in ungeordneter Liste unten ausrichten

Beitrag lesen

@@MrMurphy:

nuqneH

Die Vorschaubilder sind höchstens 140px breit oder hoch.

Dann gib dem Elementtypen, der die Bilder enhält, eine feste Zeilenhöhe von 140 Pixeln.

dl {
float: left;
}

Mit 'float' wirst du nicht glücklich, wenn die Bildunterschriften unterschiedlich lang sind (verschieden viele Zeilen). 'inline-block' als Aternative.

<dl>
  <dt>
    <img src="001.jpg" width="105" height="140">
  </dt>
  <dd>Text</dd>
</dl>
<dl>
  <dt>
    <img src="002.jpg" width="140" height="120">
  </dt>
  <dd>Text</dd>
</dl>

Dein Markup ist falsch. Du hast nicht eine Liste von Bildern mit Bildunterschriften, sondern viele Listen mit jeweils einem Bild mit Unterschrift.

Es in HTML kein Element gibt, zusammengehörige 'dt' und 'dd' zu gruppieren. In XHTML 2 ist dafür 'di' vorgesehen; in HTML5 war es das auch mal, da aber Hickson dessen Sinn nicht erkannt hat, ist es wieder rausgeflogen. Große Dummheit!

Eine Definitionsliste ist also hier (wie in vielen anderen Fällen) untauglich.

Dein Markup sähe besser so aus:

<ul>  
  <li>  
    <span class="bild"><img src="001.jpg" width="105" height="140"></span>  
    <span class="bildunterschrift">Text</span>  
  </li>  
  <li>  
    <span class="bild"><img src="002.jpg" width="140" height="120"></span>  
    <span class="bildunterschrift">Text</span>  
  </li>  
</ul>

In HTML5 wird es zur Gruppierung von Bild und Bildunterschrift das 'figure'-Element geben. [HTML5 §4.8.1]

Qapla'

--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)