MrMurphy: Bilder in ungeordneter Liste unten ausrichten

Beitrag lesen

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