Bilder überlappend

[.:: Andreas ::.]

Hallo,
ich habe 3 Bilder die ich überlappt darstellen möchte.
Also 3 div-Container nehmen:
<div id="box1"><img src="..."></div>
<div id="box2"><img src="..."></div>
<div id="box3"><img src="..."></div>

#box1 { position:relative; top:10px; left:20px; z-index:1; margin:0px;}
#box2 { position:relative; top:-80px; left:240px; z-index:2; margin:0px;}
#box3 { position:relative; top:-200px; left:240px; z-index:2; margin:0px;}

Da relativ fängt das 2. Bild an der Unterkante des ersten an, daher -80. Das gleiche beim 3. Bild.

Die Bilder werden auch richtig überlappt, aber der nebeneffekt ist der dass die Höhe für alle 3 Bilder untereinander quasi reserviert wird und daher Inhalte die danach kommen eben einen Abstand zum letzten Bild haben. Das 3. Bild muss man jetzt noch viel höher schieben (-200) da man ja die unsichtbaren 80px überwinden muss.
Einfach mal mit der gedrückten Maustaste über die Bilder fahren und man sieht den Schatten.

Was kann man dagegen machen? Eine Lösung wäre sicherlich die Abs. Positionierung, aber wie wirkt sich dann unterschiedliche Auflösungen, Browser etc aus?

Gruß Andreas
Hier der Link: http://www.access-o-mania.de/pension/
PS: Seite ist noch am Entstehen

[Gunnar Bittersmann]

Hello out there!

Was kann man dagegen machen?

Aus den drei Bildern eins machen.

See ya up the road,
Gunnar

[Andreas]

Hallo,

Aus den drei Bildern eins machen.

ja schon klar, hatte ich am Anfang ja schon.
Nochmal zurück zur absoluden Positionierung. Ist sowas machbar? In wie weit verändert sich das Layout von Browser zu Browser, Auflösung, etc?

Andreas

[Detlef G.]

Hallo Andreas

ich habe 3 Bilder die ich überlappt darstellen möchte.
Also 3 div-Container nehmen:
<div id="box1"><img src="..."></div>
<div id="box2"><img src="..."></div>
<div id="box3"><img src="..."></div>

Warum packst du jedes Bild nochmal extra in ein Div?
Auch img kann mittels CSS formatiert werden, und wenn es nötig ist, kann
img auch mittels display:block zum Blockelement werden.

Eine Lösung wäre sicherlich die Abs. Positionierung, aber wie wirkt sich dann unterschiedliche Auflösungen, Browser etc aus?

Auf die Auflösung weniger, eher auf die Browserfenstergröße.
Mittels position:relative für das Elternelement bezieht sich die absolute
Positionierung dann auf dieses und nicht mehr aufs Browserfenster.

Vielleicht wäre es aber besser auf position zu verzichten:

#box1 { margin:10px auto auto 20px;}  
#box2 { margin:-80px auto auto 240px;}  
#box3 { margin:-120px auto auto 240px;}  

Auf Wiederlesen
Detlef