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;"> </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