Bilder nebeneinander in einer Reihe

[Andreas_B.]

Hallo zusammen!

In den Content-DIV würde ich gerne 4 Bilder in eine Reihe/Ebene packen. Darunter dann noch eine Reihe, insgesamt 4 Reihen mit jeweils 4 Bilder.

Zwischen den Bildern immer schön gleichmäßiger Abstand.
Kann mir bitte kurz einer erklären wie ich das ohne Tabellen lösen kann?

 

[chriZ]

Sei gegrüßt,

du könntest das folgendermaßen umsetzen:

<div>
    <img src="bild1" width="120" height="96" alt="" style="margin:5px" align="left">
    <img src="bild2" width="120" height="96" alt="" style="margin:5px" align="left">
    <img src="bild3" width="120" height="96" alt="" style="margin:5px" align="left">
    <img src="bild4" width="120" height="96" alt="" style="margin:5px" align="left">
</div>
[...]

Mit "margin" hast du dann einen 5px Abstand zu dem rechten Bild. Dieser Code ist aber nur bis xHTML 1.0 valide, sonst müsstest du für xHTML 1.1 für jedes Bild ein eigenständiges "div" mit "float" Angaben zuweisen, weil "align" dort nicht mehr erlaubt ist!

Mfg chriZ

 

[Andreas_B.]

Servus chriZ !

Cool. Wunderbar. So hab ich das gemeint.
Vielen Dank!!! :)

Aber leider funktioniert das nur im Firefox. Da sieht alles super aus.
Im (dummen) IE7 leider nicht. Da sind alle Bilder nebeneinandern einfach übers Design raus, unendlich lange.

 

[chriZ]

Hmm, habs nochmal getestet, lass einfach das "align" weg, dann klappt es auch! Wie gross sind denn die Bilder?

Mfg chriZ

 

[Andreas_B.]

Also wenn ich das align="left" rausnehmen passt es erst recht nicht. Dann Sind in IE und FF alle Bilder untereinander gelistet. Die bilder haben eine Breite von 150px.

 

[chriZ]

Hmm das verstehe ich nicht, bei mir hat es im IE 6.0 sowie Firefox 2.0.3 funktioniert!

<div>
    <img src="bild1" width="120" height="96" alt="" style="margin:5px">
    <img src="bild2" width="120" height="96" alt="" style="margin:5px">
    <img src="bild3" width="120" height="96" alt="" style="margin:5px">
    <img src="bild4" width="120" height="96" alt="" style="margin:5px">
</div>
<div>
    <img src="bild1" width="120" height="96" alt="" style="margin:5px">
    <img src="bild2" width="120" height="96" alt="" style="margin:5px">
    <img src="bild3" width="120" height="96" alt="" style="margin:5px">
    <img src="bild4" width="120" height="96" alt="" style="margin:5px">
</div>

Wie hast du denn den Code ingesetzt bei dir, zeig mal bitte den Code! Mfg chriZ

 

[matibaski]

Teste es mal mit float:left; aus

MfG, matibaski

 

[Andreas_B.]

@chriZ:

IE6 habe ich leider nicht (mehr).
Verwende den IE7 und damit hat es leider nicht funktioniert.

@matibaski:

Ja perfekt!!! Das war es. :)
Mit float:left; sind die Bilder nun in beiden Browsern richtig ausgerichtet.

Vielen lieben Dank euch beiden!

 

[chriZ]

Ja das ist schon merkwürdig!
Aber gut das es jetzt geklappt hat!

Mfg chriZ