MrMurphy: Bilder in ungeordneter Liste unten ausrichten

SELF-Forum

Bilder in ungeordneter Liste unten ausrichten

MrMurphy
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte mittels einer ungeordneten Liste (dl dt dd) eine Vorschau für eine Bildergalerie erstellen. Die Vorschaubilder sind höchstens 140px breit oder hoch.

Erst mal der Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>Bildergalerie</title>  
<style type="text/css">  
dl {  
	padding: 8px;  
	border-color: grey;  
	border-style: solid;  
	border-width: 1px;  
	margin: 1px;  
	width: 160px;  
	height: 180px;  
	float: left;  
}  
dl dt {  
	padding: 0;  
	border: 0;  
	margin: 0;  
	width: auto;  
	height: 150px;  
	position: relative;  
}  
dl dd {  
	padding: 0;  
	border: 0;  
	margin: 0;  
	text-align: center;  
}  
dl dt img {  
	padding: 0;  
	border: 0;  
	margin: 0 auto;  
	display: block;  
	background-color: #F00;  
	bottom: 0px;  
}  
</style>  
</head>  
<body>  
<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>  
<dl>  
  <dt>  
    <img src="003.jpg" width="100" height="80">  
  </dt>  
  <dd>Text</dd>  
</dl>  
<dl>  
  <dt>  
    <img src="004.jpg" width="100" height="80">  
  </dt>  
  <dd>Text</dd>  
</dl>  
<dl>  
  <dt>  
    <img src="005.jpg" width="100" height="80">  
  </dt>  
  <dd>Text</dd>  
</dl>  
<dl>  
  <dt>  
    <img src="006.jpg" width="100" height="80">  
  </dt>  
  <dd>Text</dd>  
</dl>  
<dl>  
  <dt>  
    <img src="007.jpg" width="100" height="80">  
  </dt>  
  <dd>Text</dd>  
</dl>  
<dl>  
  <dt>  
    <img src="008.jpg" width="100" height="80">  
  </dt>  
  <dd>Text</dd>  
</dl>  
<p style="clear:both;">&nbsp;</p>  
</body>  
</html>

Zur Zeit richten die Bilder sich mit ihrer Oberseite an dem umgebenden dt-Bereich aus. Ich möchte die Bilder an der Unterkante des dt-Teils ausrichten, so das sie immer den gleichen Abstand zum darunterliegenden Text haben. Wie kann das bewerkstelligt werden?

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bilder in ungeordneter Liste unten ausrichten

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@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)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln