30.12.2007

Bilder nebeneinander anordnen

Mit CSS ist es auch möglich, Bilder und Grafiken nebeneinander anzuordnen, ohne dass dies Tabellencode erfordert.

1. Einfache Anordnung

Die einfachste Anordnung besteht darin, ohne CSS die Image-Tags in den HTML-Quelltext einzufügen. Da "img"" ein Inline-Element ist, wird es automatisch nebeneinander angeordnet.

HTML-Code:

<img src="rose1.jpg" width="150" height="150" border="0" alt="Rose 1">

<img src="rose2.jpg" width="150" height="150" border="0" alt="Rose 2">

<img src="rose3.jpg" width="150" height="150" border="0" alt="Rose 3">

Beispiel ansehen

2. Anordnung mit float-Angabe

Wen möglicherweise noch die Zwischenräume stören, der kann die Bilder mit einem float: left; versehen. Diese Angabe verwandelt zum einen die ursprünglichen Inline-Elemente zu Blockelementen. Zum andern erfolgt dadurch die reihenweise Anordnung.
Im Demobeispiel haben alle Bilder eine Breite von 150px. Wir definieren nun zunächst folgende CSS-Klasse, die wir später für einen anderen Zweck noch erweitern:

.img150
{
float: left;
}

Damit diese Klasse durchschlägt, ändern wir unseren HTML-Quellcode wie folgt:

<img class="img150" src="rose1.jpg" width="150" height="150" border="0" alt="Rose 1">

<img class="img150" src="rose2.jpg" width="150" height="150" border="0" alt="Rose 2">

<img class="img150" src="rose3.jpg" width="150" height="150" border="0" alt="Rose 3">

Beispiel ansehen

3. Bilduntertexte einfügen

Oft ist es auch sinnvoll, die Bilder mit entsprechenden Bilduntertexten zu erläutern.
Sofern alle Bilder einheitliche Formate haben (im Beispiel 150px Breite), lässt sich das ebenfalls mit CSS bewerkstelligen.
Wir erweitern unsere CSS-Angabe um eine Breitenangabe (entsprechend der Bildbreite), damit der Bilduntertext nicht über die Bildbreite herausragt. Der Bilduntertext soll eine etwas kleinere Schriftgröße haben. Ferner hinterlegen wir noch einen Padding-Wert, damit zwischen den Bildern wieder eine kleine Lücke entsteht. Das Ganze sieht dann so aus:

.img150
{
float: left;
width: 150px;
padding: 3px;
font-size: 0.7em;

}

Den HTML-Code ändern wir jetzt dahingehend, dass wir nicht mehr beim img-Tag auf die CSS-Klasse ".img150" verweisen, sondern jedes Bild in einen Div packen, der dann auch den jeweiligen Bilduntertext enthält:

<div class="img150">
<img src="rose1.jpg" width="150" height="150" border="0" alt="Rose 1">
Bilduntertext zur Rose 1
</div>

<div class="img150">
<img src="rose2.jpg" width="150" height="150" border="0" alt="Rose 1">
Bilduntertext zur Rose 2 und Zusatztext zur Rose 2
</div>

<div class="img150">
<img src="rose3.jpg" width="150" height="150" border="0" alt="Rose 1">
Bilduntertext zur Rose 3
</div>

Beispiel ansehen

Beachte:
In den Beispielen zwei und drei sind die einzelnen Bilder gefloatet. Um im Anschluss an eine (oder mehrere) Bildreihe weiteren Inhalt wieder linksbündig anzuordnen ist es erforderlich, nach dem letzten gefloateten Element wieder zu clearen. Das erreicht man im HTML-Code am einfachsten mit einem

<br style="clear: both;">

nach oben