• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder nebeneinander in einer Reihe

Status
Für weitere Antworten geschlossen.

Andreas_B.

Neues Mitglied
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?
 
Werbung:
Sei gegrüßt,

du könntest das folgendermaßen umsetzen:

PHP:
<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
 
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.
 
Werbung:
Hmm, habs nochmal getestet, lass einfach das "align" weg, dann klappt es auch! Wie gross sind denn die Bilder?

Mfg chriZ
 
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.
 
Hmm das verstehe ich nicht, bei mir hat es im IE 6.0 sowie Firefox 2.0.3 funktioniert!

PHP:
<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
 
Werbung:
@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!
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben