Bilderliste mit automatischem Umbruch

[gast]

Hallo zusammen,

ich habe ein html-Problem, bei dem ich trotz langer Suche nicht weiterkomme. Es wäre klasse, wenn mir jemand einen Tipp geben könnte.

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.

D.h. ich kann keine feste Tabelle machen, weil ich vorher nicht weiss, wie die Bildschirmauflösung des Betrachters sein wird. Ausserdem kommen die Bilder aus einer Datenbank und pro Bilderserie gibt es unterschiedlich viele Bilder.

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.

Ebenso, wenn 7 oder mehr Bilder in eine Zeile passen.

Unter http://waldhaus.memo-software.de/pics/test.htm findet Ihr die Problemseite.

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

Ich hoffe, dass das an Infos ausreicht, sonst sagt bitte Bescheid.

Vielen Dank schonmal für Eure Mühe und viele Grüße!

Martin

[Richard Rüfenacht]

Hallo Martin!

Verschoben werden die Bilder, weil welche mit einer Höhe von 113 px dazwischen sind, statt der 112 px.

Du redest selbst von einer Liste, warum verwendest du dann nicht einfach eine Liste statt diesem krankhaften Tabellen-Layout?

Beste Grüsse
Richard

[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