28.01.2008

Bildergalerie mit CSS-formatierter Liste

Eine Bildergalerie lässt sich nicht nur mit einer Tabelle, sondern auch mit einer CSS-definierten Liste erstellen.
Zu diesem Zweck verwenden wir eine "unordered list" - <ul> - und fügen die einzelnen Grafiken als Listenelement ein. Ein Bilduntertext kann gleich mitgeliefert werden. Idealerweise haben die Bilder die gleiche Höhe und der Bilduntertext die gleiche Länge bzw. gleiche Zeilenanzahl.

<div id="galerie">
<ul>
<li><img src="rose01.png" alt="Rose 1">Rose 1</li>
<li><img src="rose02.png" alt="Rose 2">Rose 2</li>
<li><img src="rose03.png" alt="Rose 3">Rose 3</li>
<li><img src="rose04.png" alt="Rose 4">Rose 4</li>
<li><img src="rose05.png" alt="Rose 5">Rose 5</li>
<li><img src="rose06.png" alt="Rose 6">Rose 6</li>
</ul>
<div style="clear: both;"></div>
</div>

Ohne weitere Formatangaben sieht das noch etwas seltsam aus, wie Beispiel 1 zeigt.

Aufzählungspunkte entfernen

Die Aufzählungspunkte am linken Rand werden mit list-style-type: none; für die Listenelemente entfernt.

Bilder nebeneinander anordnen

Hierzu weisen wir den li-Elementen ein float:left; zu. Sie ordnen sich damit automatisch in einer Reihe an. Reicht der Platz in der Breite nicht mehr aus, wird das folgende Bild in der nächsten Reihe angeordnet.

Bildgrößen definieren

Die einheitlichen Bildgrößen werden ebenfalls in den CSS-Angaben mit width: 150px; height: 150px; hinterlegt. Bei rechteckigen, größeren oder kleineren Bildern sind diese Angaben entsprechend abzuändern. Für eine gute Bildqualität sollten die verwendeten Bilder möglichst dann auch diese Größen haben, um unerwünschte Verpixelungen und damit Qualitätsverluste zu vermeiden.

Bildunterschriften positionieren

Indem wir die Bilder mit display: block; zu Blockelementen umwandeln, wird der Bilduntertext unterhalb der Grafiken angeordnet.

CSS-Angaben

Aus diesen vier Style-Angaben ergibt sich folgender CSS-Code:

#galerie li
{
list-style-type: none;
float: left;
}

#galerie img
{
width: 150px;
height: 150px;
display: block;
}

Sehen wir uns das Ergebnis in Beispiel 2 an.

Feinarbeit

Jetzt ist nur noch etwas Feinarbeit erforderlich, um der Galerie den letzten Schliff zu geben:

Etwas Abstand zwischen den einzelnen Bildern sowie zwischen den Bildreihen erreichen wir mit margin: 0 10px 10px 0; für die Listenelemente.
Soll der Text zentriert werden und in Fettschrift erscheinen, benötigen wir noch ein text-align: center; font-weight: bold;

Wer möchte, kann den Bildern auch noch einen Rahmen verleihen. Im Beispiel soll zwischen Bild und Rahmen noch ein kleiner Leerraum von 3px erzeugt werden. Somit weisen wir dem img noch ein padding: 3px; border: 1px solid #8B0000; zu.

Das führt dann zu folgenden, erweiterten CSS-Angaben:

#galerie li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;

}

#galerie img
{
width: 150px;
height: 150px;
display: block;
padding: 3px;
border: 1px solid #8B0000;

}

In Beispiel 3 seht ihr das Endergebnis.

Hinweis:

Da die einzelnen Listenpunkte gefloatet sind, achtet unbedingt darauf, nach dem Schließen der Liste auch wieder zu clearen:

<div style="clear: both;"></div>

Quelle:
Die Idee zu dieser Anleitung ist dem Buch Der CSS-Problemlöser: Über 100 Lösungen für Cascading Stylesheets von Rachel Andrew, dpunkt.verlag entnommen.

nach oben