[ChillinJill]

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,
Jill

[heiko_rs]

[ChillinJill]

Genau so wars gemeint. Die Text-Grundlinie und die Bildunterkante sollen stets auf der selben Höhe stehen.
Quasi bündig abschließen.

Könntest Du mir die Inline-Variante erläutern?
Ich nehme an, aus die <dl> als Inline-Element deklarieren?

[heiko_rs]

[ChillinJill]

Super! Vielen Dank für Deine schnelle und ausführliche Hilfe.

Soweit ich Dich richtig verstanden habe, krieg ich dann folgenden Code zusammen:

HTML:

<div id="teamTop">
<div id="team">

<span><img class="picLeft" src="img/....png" width="" height="" /></span>
<dl class="captionRight">
<dt>From left to right:</dt>
<dd>M.M.</dd>
<dd>T. T.</dd>
<dd>L. L.</dd>
</dl>
</div>
</div>



CSS:

#teamTop {display: table;}
#team * {vertical-align: bottom;}
#team {display: table-row;}
#team dl {
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
font-size: 70%;
color: #777;
line-height: 140%;
display: table-cell;
}
.span {
display: table-cell;
vertical-align: bottom;
}


Stimmt das soweit? Damit spar ich mir also zudem die float-Geschichte?!

Das Problem, das momentan noch auftritt ist, daß die Grundlinie der Definitionsliste nicht ganz mit der Bildunterkante abschließt. Die Definitionsliste sitzt noch 2, 3 Pixel zu weit oben.
Hättest Du hierfür irgendne Idee?


Nochmals vielen Dank für Deine Hilfe! Ich revanchier mich, indem ich Deinen nächsten Einkauf erledige!

[heiko_rs]

[ChillinJill]

Klasse! Vielen Dank!
Mit padding-bottom konnte ich den Schönheitsfehler beheben.

Steht bereits mit drin:

[heiko_rs]