Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
ChillinJill
Threadersteller
Dabei seit: 24.06.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 10.09.2009 18:44
Titel CSS: Legende (als Definitionsliste) an Bildunterkante ausr. |
|
|
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
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.09.2009 18:52
Titel Re: CSS: Legende (als Definitionsliste) an Bildunterkante au |
|
|
ChillinJill hat geschrieben: | Was ich nicht hinbekomme, ist daß die letzte Zeile der Legende mit der Unterkante des Bildes abschließt. |
Das heißt, das letzte dd steht de facto zu weit oben? Dann bleibt Dir nichts anderes übrig, als durch padding/margin größere vertikale Abstände zu schaffen. In dem Bewusstsein, dass diese Maßnahme bei Textzoom eh hinfällig ist
Edit: Oder meinst Du, dass die dl unabhängig von ihrer Höhe immer mit dem img quasi auf der baseline stehen soll? Dafür gäbe es 3 Ansätze: pos. abs. (einfach, aber schlecht), table-Eigenschaften (gut), inline-block (gut, aber relativ mühsam )
Zuletzt bearbeitet von heiko_rs am Do 10.09.2009 19:06, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
ChillinJill
Threadersteller
Dabei seit: 24.06.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 10.09.2009 19:10
Titel
|
|
|
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
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.09.2009 19:48
Titel
|
|
|
ChillinJill hat geschrieben: | Ich nehme an, aus die <dl> als Inline-Element deklarieren? |
So einfach geht es leider nicht - inline-block ist schon noch etwas anderes
Aus Gründen der Stabilität in FX < 3, und weil die inline-block-Variante in diesem Falle (wegen der bottom-Ausrichtung) in Opera < 9 kaum zum Laufen zu bringen ist, würde ich hier die table-Eigenschaften empfehlen. Du bräuchtest dann noch ein weiteres div um alles, sowie ein span um img.
Das äußere div bekommt display: table;, das nächste table-row, und span und dl bekommen jeweils table-cell plus vertical-align: bottom;. Oder Du schreibst div * { vertical-align: bottom; } - das gilt dann für alle Elemente innerhalb des divs, so dass auch gleich die Unterlänge des img entfernt wird (alternativ mit display: block;).
Und wie Du das Ganze im IE < 8 zum Laufen bekommst (mit display: inline; und zoom: 1; ), erkläre ich Dir, wenn ich vom Einkaufen zurück bin (oder jemand anderes tut's vorher )
|
|
|
|
|
ChillinJill
Threadersteller
Dabei seit: 24.06.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 10.09.2009 20:18
Titel
|
|
|
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
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.09.2009 20:45
Titel
|
|
|
ChillinJill hat geschrieben: | Stimmt das soweit? |
Ja, sieht gut aus. Nur der Punkt vor span sollte weg (spräche eine Klasse an, Du musst aber das Element span ansprechen). Außerdem immer empfehlenswert: line-height ohne jegliche Einheit (vermeidet Vererbungsfehler), hier 1.4.
ChillinJill hat geschrieben: | Damit spar ich mir also zudem die float-Geschichte?! |
Ja, entfällt, da die Elemente jetzt in "Tabellenzellen" nebeneinander stehen
ChillinJill hat geschrieben: | daß die Grundlinie der Definitionsliste nicht ganz mit der Bildunterkante abschließt. |
"Grundlinie" ist das richtige Stichwort - vergiss die Unterlänge nicht! Sie steht logischerweise unterhalb der baseline (wenn Du z.B. ein kleines "g" einfügst, siehst Du was ich meine). Durch verringern der line-height kannst Du noch etwas erreichen (ggf. ausgleichen durch padding-top), alternativ kann auch die Unterlänge von img bleiben (wird momentan noch entfernt). Oder padding-bottom für span o.ä.
Unabhängig davon sollte am Anfang des CSS immer folgendes stehen:
Code: | * {
margin: 0;
padding: 0;
} |
ChillinJill hat geschrieben: | Ich revanchier mich, indem ich Deinen nächsten Einkauf erledige! |
Ha, ich nehme Dich beim Wort! Bei Kaiser's in Berlin-Westend, falls Dir der Weg dorthin nicht zu weit ist
Zuletzt bearbeitet von heiko_rs am Do 10.09.2009 20:46, insgesamt 1-mal bearbeitet
|
|
|
|
|
ChillinJill
Threadersteller
Dabei seit: 24.06.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 10.09.2009 21:09
Titel
|
|
|
Klasse! Vielen Dank!
Mit padding-bottom konnte ich den Schönheitsfehler beheben.
Steht bereits mit drin:
Code: | * {
margin: 0;
padding: 0;
} |
Sodale, nachdem die Sache nun steht. Wie war das mitm IE?
Einkaufen ist kein Problem - komm ich doch mitm Zug nach Berlin. Oder schick Dir ein Care-Paket ausm Süden?!
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.09.2009 21:35
Titel
|
|
|
ChillinJill hat geschrieben: | Sodale, nachdem die Sache nun steht. Wie war das mitm IE? |
Der IE < 8 kennt die Tabelleneigenschaften nicht, und ebensowenig display: inline-block;. Letzteres wird ihm jetzt aber beigebracht. Bekommt ein inline-Element hasLayout durch zoom: 1;, wird das gewünschte Verhalten ausgelöst, daher gibst Du nur dem IE < 8 (keinem anderen Browser!) einfach noch
Code: | span,
dl {
display: inline;
zoom: 1;
} |
Ich persönlich bevorzuge die Einbindung eines separaten IE-CSS per Conditional Comment - sagt Dir das was?
ChillinJill hat geschrieben: | Einkaufen ist kein Problem - komm ich doch mitm Zug nach Berlin. |
Alles klar, sag nur vorher Bescheid
ChillinJill hat geschrieben: | Oder schick Dir ein Care-Paket ausm Süden?! |
Care-Paket finde ich super Süden übrigens auch, welche Ecke?
Zuletzt bearbeitet von heiko_rs am Do 10.09.2009 21:39, insgesamt 2-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Nummerierte Marker je Sprechblase sowie Legende in Ad. Pro?
Java-Befehl "open window" mit Legende erweitern
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|