Problem bei Galerie mit CSS

[bishbind]

Hallo,

ich will mit CSS eine kleine Galerie gestaltet. Der XHTML-Code ist dafür so aus:

<ul class="photos">
  <li><a href="_img/photos/people_bank.png" rel="lightbox" title="Erholung"><img src="_img/photos/people_bank_thumb.png" class="leftalign" alt="Foto" /></a></li>
  <li><a href="_img/photos/people_flasche.png" rel="lightbox" title="Erholung"><img src="_img/photos/people_flasche_thumb.png" class="leftalign" alt="Foto" /></a></li>
  <li><a href="_img/photos/people_kuss.png" rel="lightbox" title="Erholung"><img src="_img/photos/people_kuss_thumb.png" class="leftalign" alt="Foto" /></a></li>
  <li><a href="_img/photos/people_wand.png" rel="lightbox" title="Erholung"><img src="_img/photos/people_wand_thumb.png" class="leftalign" alt="Foto" /></a></li>
  <li><a href="_img/photos/people_wanderer.png" rel="lightbox" title="Erholung"><img src="_img/photos/people_wanderer_thumb.png" class="leftalign" alt="Foto" /></a></li>
</ul>

und der CSS-Code so:

.photos {
	width: 550px;
	list-style-type: none;
	list-style-image: none;
	padding-top: 10px;
	padding-bottom: 1px;
	padding-left: 10px;
	float: left;
}

Mein Problem ist jetzt, dass alle Bilder nebeneinander angezeigt werden und dabei über die 550px hinausschießen. Bisher habe ich noch nicht den Grund gefunden, warum nach dem dritten Bild nicht umbrochen wird. Oder kann man eine solche Galerie nicht mit Hilfe einer Liste bauen?


Grüße
Christian

[hero-master]

Hi
eine Bildergalerie per Liste zu lösen finde ich gar nicht so verkehrt. Ist ja eine ungeordnete Auflistung von Bildern.
Es würde aber auch allgemein gehen, dass du die Bilder so nebeneinander schreibst
Zu deinem Problem: Aus dem kleinen Codeschnitzel lässt sich wenig herausfinden.
Meine Vermutung:
gib der Klasse .photos noch ein margin:0

[bishbind]

Ich dachte auch, dass es von der Semantik besser ist eine ungeordnete Liste zu verwenden. Es gab aber keine Möglichkeit, einen Umbruch nach 550 Pixel zu erreichen. Die width-Angabe wurde einfach ignoriert.

Jetzt habe ich einfach die einzelnen Grafiken nur an einandergereiht. Zwar nicht schon, aber es funktioniert wenigstens.