Abstand, zwischen den Bildern. Einstellungen

[tobias]

Hallo...

die Bilder meiner Homepage sollen nebeneinander angezeigt werden.Zwischen den einzelnden Bildern sollte aber ein geringer Abstand vorhanden sein.Wie kann ich solch ein Abstand beim Editor einstellen?!

Viele Dank im voraus
Gruss
Tobias

[SteffenG]

Hallo Tobias,

Ich weiss jetzt nicht, wie viele Bilder du nebeneinander anzeigen möchtest, aber wenn's eine Gallerie ist (mit Thumbnails z.B.), dann gibt's eine nette Möglichkeit:

HTML

<div id="bilder">
<img src... />
<img src... />
<img src... />
<img src... />
</div>

und in's CSS:

HTML

div#bilder img{float:left;margin-right:5px;width:150px}

Wenn's auf der Seite nur diese Bilder gibt, kannst du sogar das div (und das #bilder im CSS) weglassen.

Das coole an dieser Lösung ist, dass sich die Anzahl der Bilder pro Zeile an die Breite des Browserfensters anpasst. Das kommt durch's floaten.
Weil floaten das Element automatisch als Blockelement auszeichnet, musst du jedem einzelnen Bild noch eine Breite zuweisen (siehe CSS). In einer Thumbnailgallerie ist das wohl EIN Wert für alle Bilder. Bei verschiedenen Werten müsstest du jedem img-Element noch eine id verpassen und der dann eine Breite geben:

HTML

<img src... id="bild1" />

und das CSS:

HTML

img#bild1 {width:150px;}

Eine Demonstration dieser Lösung findest du in dieser Gallerie. Einfach mal experimentieren und die Größe/Breite des Browserfensters ändern...
Auf dieser Seite ist das Ganze etwas anders realisiert, weil zu jedem Bild noch Text gekommen ist:

HTML

<div class="thumb">
<img ... /><br />text
</div>

schöne Grüße
Steffen