[mcnesium]

ich habe eine bildergalerie semantisch korrekt mit folgendem code:

<dl>
	<dt><img src="typo3temp/pics/e220a56d13.jpg"/></dt>
	<dd>Beschreibung</dd>
	<dt><img src="typo3temp/pics/e220a56d13.jpg"/></dt>
	<dd>Beschreibung</dd>
	<dt><img src="typo3temp/pics/e220a56d13.jpg"/></dt>
	<dd>Beschreibung</dd>
	<dt><img src="typo3temp/pics/e220a56d13.jpg"/></dt>
	<dd>Beschreibung</dd>
</dl>

Im normalfall wird das im browser so dargestellt (blau bild, rot beschreibung):


die bilder und ihre beschreibungen können nicht weiter verschachtelt werden, da das ganze sonst nicht valide ist. also können sie auch nicht direkt nebeneinander floaten. also hab ich erstmal jedem dt und dd width: 33%; und float: left; gegeben. ergebnis sieht folgendermaßen aus:


nun hab ich dd noch margin-left: -33%; margin-top: 10em; gegeben und schon sitzt die beschreibung unter dem dazugehörigen bild:


soweit sogut. jetzt kommt meine frage. denn was passiert, wenn nicht 3 sondern 4 oder mehr bilder da sind? dann siehts im safari 3.2, opera 9.2 und IE7 so aus:

man beachte: die erste beschreibung ist eine zeile länger als die zweite und dritte. darum ist das vierte bild unter dem zweiten. ist nicht so schön, aber das viel größere problem ist im firefox 3 zu sehen:

da werden die floatenden beschreibungen von den bildern der nächsten zeile überlagert. was kann ich denn dagegen tun?

[toscho]

Zitat von mcnesium

bildergalerie semantisch korrekt …

Du lieferst tatsächlich jedesmal eine Definition des Dargestellten und keine bloße Beschreibung? Bitte verlinke es hier, wenn du fertig bist.

Zitat von mcnesium

da werden die floatenden beschreibungen von den bildern der nächsten zeile überlagert. was kann ich denn dagegen tun?

Im Prinzip brauchst du einen Container, der jeweils Bild und Definition enthält und für die Breite zuständig ist. Also anderes Markup.
Oder innerhalb der Definitionen wieder einen Container, der selber fließt, aber da rennst du eine Bug-Hölle.

Gruß
Thomas