Bilderliste mit automatischem Umbruch

[Der Martin]

Moin und wieder ein Namensvetter,

Und zwar habe ich vor, eine Liste von Bildern mit Bildunterschriften anzeigen zu lassen, wobei sich die Anzahl der angezeigten Bilder pro Zeile an die Fensterbreite anpassen soll.

Liste ist ein gutes Stichwort. Ich würde das zunächst wirklich als Liste (ul) auszeichnen. Jedes einzelne li-Element enthält dann ein img und einen kurzen Text zum Bild. Das HTML dazu könnte also sehr übersichtlich und kompakt ausfallen:

<ul id="gallery">  
 <li><img src="..." alt="...">Text</li>  
 <li><img src="..." alt="...">Text</li>  
 <li><img src="..." alt="...">Text</li>  
 <li><img src="..." alt="...">Text</li>  
</ul>

Im CSS müssen wir nun dafür sorgen, dass
 * das ul-Element seine üblichen Aufzählungspunkte (bullets) verliert
 * die li-Elemente sich ordentlich anreihen
 * nach dem img-Element in jedem li ein Umbruch erfolgt
 * das img-Element auf Wunsch in seinem li-Container zentriert sitzt.

Ich habe das mal so ausprobiert:

#gallery  
 { list-style-type: none;  
 }  
#gallery li  
 { float:left;  
   margin: 12px;  
 }  
#gallery li img  
 { display: block;  
   margin-left: auto;  
   margin-right: auto;  
 }

Mit der Zentrierung über margin:auto kann IE<6 bekanntlich nichts anfangen. Man kann sich daher überlegen, ob man für #gallery img zusätzlich text-align:center angibt. Dann wäre zwar das Bild im IE5.x zentriert, der Text aber auch - in allen Browsern. Muss man also abwägen.

Mein Versuch scheitert nun daran, dass die Liste der Bilder im Firefox und IE6 nicht fortlaufend angezeigt wird, sondern Lücken aufweist. Wenn 6 Bilder in einer Zeile angezeigt werden, ist alles ok. Wenn die Fensterbreite aber nur 4 oder 5 Bilder zulässt, erscheint zwischen den Bildern eine Lücke.

Das verstehe ich jetzt nicht. Meinst du das als Nachteil des relativ starren Tabellenlayouts, das du zunächst angedeutet hast? Denn mit floatenden Containern ohne feste Positionierung wäre das nicht der Fall.

Und unter http://waldhaus.memo-software.de/pics/problem.jpg einen Screenshot.

Ich kann das gezeigte Problem zwar in Firefox und IE5.5 nachvollziehen, aber nicht erklären. Mit den gleichmäßig floatenden li-Elementen tritt das jedenfalls nicht auf.

Schönen Tag noch,
 Martin