Ich möchte unter Fotos eine "Bildunterschrift" plazieren - einen grauen Kasten der direkt unter dem Bild angrenzt (ohne Abstand) und einen Text zu dem Bild enthält.

Habe das derzeit so gelöst:

<div class="caption">
	<img src="url" alt="" width="700" height="467" />
	Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

wobei die class "caption wie folgt gelöst ist:

div.caption {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	padding-bottom: 5px;
	background-color: #eee;
}

Das Problem ist nun dass die Breite von 700px ein Hack ist: Es soll auch Bilder mit anderer Breite geben und ich möchte aber nicht für jedes Bild eine neue Klasse schreiben. Optimal wäre eine Klasse die automatisch durch das Bild "auseinander gedrückt" wird, also immer genau so breit ist wie das Bild innerhalb des div.

Weiters soll das Bild zentriert (mit Bildunterschrift) zentriert innerhalb des darüber geordneten "content"-divs dargestell werden. margin-right und margin-left: auto scheint hier üblich zu sein - ist das auch eine gute Lösung?

Und abschließend wäre es noch nett wenn der Text unterdem Bild nach oben/unten/links/rechts einstellbares Padding hätte. Aber das könnte ich ja mit einem extra div lösen.

Also die wichtigste Frage betrifft den Kasten für die Bildunterschrift: Ist die Verschachtelung der Tags so CSS-mäßig gut? Und wie muss ich den Code ändern dass der Kasten immer jeweils so breit wie das Bild ist?

Zitat von Mr.Radar

naja, wenn du keine width vorgibst, wird der container dann nicht sowieso an die bildgröße angepasst? und text würd ich mit "text-align: center;" zentrieren.

Wenn ich keine Größe angebe wird der Layer automatisch auf die volle Breite des Eintrags auseinander gezerrt, was größer ist als das Bild. Dadurch ergeben sich links und rechts des Bildes gefärbte Ränder. Habe mittlerweile auf wired gefunden was ich brauche (http://www.wired.com/culture/art/ne…cret_satellites ), werde mir da das css ansehen, denke das sollte sich dann klären.