Bilder übereinander legen ohne position:absolute

[gumpo03]

Ich programmiere gerade eine Reponsive Webseite. Auf der habe ich eine JS Slideshow für die ich 2 Bilder übereinander legen musste. Das habe ich ursprünglich mit position:absolute gemacht. Dadurch dass ich die Webseite nun mit CSS3 auf Reponsiv getrimmt habe ist das allerdings nicht mehr möglich, da das Bild sonst bei einem skalieren der Webseite über den anderen Inhalt geschoben wird und das min-width der div's nicht beachtet. Meine Frage lautet also, wie ich ohne den Gebraucht von position:absolute mehrere Bilder übereinander legen kann, so das ich die Slideshow auch reponsiv anpassen kann.

Danke für eure Hilfe :)

 

[Cheffchen]

Hallo,

entweder mit % angabe arbeiten oder einfach in den querys mehrere Positionen verankern.

Cheffchen

 

[scbawik]

Dadurch dass ich die Webseite nun mit CSS3 auf Reponsiv getrimmt habe ist das allerdings nicht mehr möglich

Responsive und postion:absolute schließen sich nicht gegenseitig aus.
Man sagt nur zu Anfängern, dass position:absolute nicht verwendet werden "darf", da diese es oft falsch einsetzen.

Wenn die Bilder ein fixes Seitenverhältnis haben, wäre das eine Möglichkeit:

.slideshow {
  position:relative;
  padding-bottom: 56.25%; /* Bildhöhe / Bildbreite * 100 */
  background-color: #000;
}

.slideshow img {
  position:absolute;
  top: 0;
  width:100%;
}

 

[gumpo03]

Das Bild hat fixe Seitenverhältnisse, dennoch funktioniert das ganze mit deinem Code nicht. Vielleicht muss ich dazu sagen, dass ich die Slideshow per Tabelle auf der Seite positioniere, da neben ihr noch Text steht.
So sieht der Code dann aus:

HTML:
<td valign="top">
   <div class="slideshow">
      <img src="ZschopauStraße_Bild05.jpg" class="img" name="bild3" id="bild3" hspace="20" style=" z-index:2; opacity:1; filter:alpha(opacity=100);" >
      <img src="ZschopauStraße_Bild04.jpg" class="img" name="bild4" id="bild4" hspace="20" style=" z-index:1; opacity:1; filter:alpha(opacity=100);" >
   </div>
</td>

CSS:
.img{
  position:absolute;
  top: 0;
  width:100%;
}

.slideshow {
  position:relative;
  padding-bottom: 41.6666667%; /* Bildhöhe / Bildbreite * 100 */
}

Was nun auf der Seite passiert, ist dass Spalte 1 (Slideshow) extrem klein ist (das Bild hat trotzdem die normale Größe), das Bild seine Größe nicht mehr an die größte der Seite anpasst und über dem Text liegt der in Spalte 2, welche den restlichen Platz der Tabelle einnimmt, angelegt ist.

EDIT: Ich schätze das Bild passt seine große nicht an, da sie Größe an der Tabellenspalte in der es liegt angepasst wird und diese ihre Große auch nicht mehr ändert. Nur Spalte 2 ändert ihre große.