CSS: Legende (Definitionsliste) an Bildunterkante ausrichten

chillin´ · 10.09.2009

Hallo zusammen,

über die Suchfunktion wurde ich leider nicht fündig.

Folgendes Problem:
Ein Foto soll links platziert werden und die entsprechende Legende rechts davon. Soweit kein Problem.
Was ich nicht hinbekomme, ist daß die letzte Zeile der Legende mit der Unterkante des Bildes abschließt.

Für Hilfe bin ich sehr dankbar!

Mein HTML:

<div id="team">
<img class="picLeft" src="img/....png" width="402" height="224" alt="..." title="..." />
<dl class="captionRight">
<dt>Team member from left to right:</dt>
<dd>M. M.</dd>
<dd>T. T.</dd>
<dd>L. L.</dd>
<dd>A. A.</dd>
<dd>B. B.</dd>
</dl>
</div>

Mein CSS:

.picLeft { float: left; }

.captionRight {
float: right;
padding: 10px;
}

Grüße,
chillin´

UDH5 · 13.09.2009

Hier findest du die Erklärung - Quelle: Userland

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
<style type="text/css">
/* <![CDATA[ */
#team { position: relative; width: 430px; }
#members { position: absolute; bottom: 0; right: 0; }
#members dl { margin: 0; padding: 0; }
#bild { height: 200px; width: 210px; background: #630; color: #fff; }
* html #content { height: 1%; }
/* ]]> */
</style>
</head>
<body>
<div id="team">
<div id="bild">
<pre>

  o  o  o  o  o
  |  |  |  |  |
  |  |  |  |  |
  |  |  |  |  |
     
</pre>
</div>
<div id="members">
<dl>
<dt>Team member from left to right:</dt>
<dd>M. M.</dd>
<dd>T. T.</dd>
<dd>L. L.</dd>
<dd>A. A.</dd>
<dd>B. B.</dd>
</dl>
</div>
<div class="clearall"></div>
</div>
</body>
</html>

CSS: Legende (Definitionsliste) an Bildunterkante ausrichten

chillin´

Mitglied

UDH5

Aktives Mitglied