mal wieder ne frage an unsere css-spezis:
ich habe eine bildergalerie semantisch korrekt mit folgendem code:



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?

das ganze jetzt rein über CSS auseinanderzudividieren ist haarig.

eine nicht schöne, aber dennoch valide lösung wäre wohl, die einzelnen bilder+beschreibungen als einzelne listen anzusehen:



diesen einzelnen Listen kannst du jetzt ja mit float belegen, sodass sie komplett floaten, dann dürfte sich dein Problem erledigt haben.

Und um die einzelnen dl zu strukturieren kannst ja noch eine ul drum bauen:


und die list items floaten lassen.

Hier findest du auch noch paar richtig hilfreiche Tipps:

Cascading Style Sheets { Tutorials : CSS-Layouts basiert auf Floatierung }

Dort findest du auch speziell für IE7 CSS-Hacks: Cascading Style Sheets : Artikel : Internet Explorer 7

Angeblich semantisch korrekt, aber img ohne alt?

ich hätte ncoh dazuschreiben müssen, dass diese bildergalerie von der typo3 extension tt_news erzeugt wird, und ich darum nicht ohne unsauberen code zu bauen irgendwas zwischen die einzelnen bilder packen kann. sonst hätt ich das nämlich längst so gemacht wie du sagst, perseus

/edit: mmarx, krümelkacker! natürlich is da auch n alt tag drin, aber darum gehts hier nicht.

die frage ansich ist ja nur, wie ich dem firefox erklären kann dass er nicht über die texte drüber soll. ich überlege schon da irgendwas mit absoluter positionierung zu machen, aber mir fällt nichts vernünftiges ein.

könnte einen Versuch wert sein...

hmm nee hab ich schon durch. macht keinen unterschied.