Hallo!

ich möchte 3 Bilder übereinander platzieren, jeweils mit einem Abstand von ca. 20px. Siehe Bild:

www.gryphi.us/trash/anordnung.gif

allerdings funkioniert es nicht so recht, die Bilder werden alle untereinander platziert. hier der Code:

PHP-Code:

<div style="width: 150px;">
<img src="1.jpg" width="120" height="100" class="imgborder" style="position: relative; top: 0px; left: 0px; z-index: 1;">
<img src="2.jpg" width="120" height="100" class="imgborder" style="position: relative; top: 15px; left: 15px; z-index: 3;">
<img src="3.jpg" width="120" height="100" class="imgborder" style="position: relative; top: 30px; left: 30px; z-index: 2;">
</div> 


weiß da jemand weiter?

Mit den entsprechenden margin -Werten lassen sich die Grafiken übereinander schieben:

HTML-Code:

<div style="width: 150px;">
<img src="1.jpg" width="120" height="100" class="imgborder" style="position: relative; z-index: 1;">
<img src="2.jpg" width="120" height="100" class="imgborder" style="margin:-100px 0 0 20px; position: relative; z-index: 2;">
<img src="3.jpg" width="120" height="100" class="imgborder" style="margin:-100px 0 0 40px; position: relative; z-index: 3;">
</div>

[ editpost 21:18 ] Kommentar zu den margin -Werten

Code :

1	margin: -100px 0 0 20px /* Aussenabstand: oben rechts unten links */

Danke, klappt schon besser. Nur die Unterschiede IE - FF sind zu groß =(
habe mich dazu entschlossen, das Ganze mittels "position: absolute;" zu regeln... Leider eine in meinen Augen unschöne Lösung.

Zitat von pxlArtizzt

Danke, klappt schon besser. Nur die Unterschiede IE - FF sind zu groß =(

Kann ich nicht bestätigen, denn bei mir funktioniert die vorgestellte Technik in beiden Browsers einwandfrei und ohne Unterschiede.

OK, dann hab ich vielleicht was falsch gemacht... Ich probiers nochmal aus