[silversun]

Hallo miteinander ,

ich habe ein Wordpress Blog und möchte nun in einem oder mehreren Beiträgen 2 Ebenen, sprich hier 2 Bilder übereinander legen. Das erste Bild soll der Hintergrund sein und das zweite "im Vordergrund" soll ein Dreieckbutton sein, das ganze soll so einen Videoplayer imitieren und wenn man raufklickt geht man eben auf den Artikel.

Ich habe schon einiges gegoogelt aber alles scheint nur mit position:absolute zu funktionieren. Aber irgendwie hab ich das Gefühl das wenn ich die Ebenen auf mein Wordpresslayout ausgerichtet habe, es nur für die eine Auflösung ist die ich habe, wenn jetzt jemand eine andere Monitorauflösung hat werden die 2 Ebenen auseinandergerissen.

Was ich bisher gemacht habe :

1. CSS Datei editiert :

#hinten
{
z-index:1;
position:relative; <- ich hatte es mal mit relative probiert
left:60px;
top:5px;
height:360px;
width:480px;
align:center;
}
#vorne
{
z-index:2;
position:relative;
left:100px;
top:20px;
height:81px;
width:130px;
}

und das habe ich in meinen Artikel per HTML reingeschrieben :

<div id="hinten">
<img src="hintergrundbild.jpg" width="480" height="360" border="0" alt="">
</div>
<div id="vorne">
<img src="playbutton.jpg" border="0" alt="">
</div>

Was ich vor hatte :

Der Container wo die Ebenen drin liegen soll 480px x 360px groß sein und die beiden Ebenen beinhalten. Und die beiden Ebenen sollen immer exakt übereinander liegen egal welche Auflösung man hat.

Könnte mir da jemand weiterhelfen, ich komm da irgendwie auf keinen grünen Zweig

[onip]

warum machst du kein background-image (hintergrundbild.jpg)
und positionierst mit margin dein playbutton.jpg.

<div class="container" style="width: 480px;height: 360px;background: transparent url(hintergrundbild.jpg) no-repeat;">
	<img src="playbutton.jpg" border="0" alt="" style="margin: 10px 0 0 10px" />
</div>

[silversun]

danke für die schnelle hilfe ,

manchmal stellt man sich alles komplizierter vor als man es eigentlich hätte machen könne

ist es eigentlich auch noch möglich das wenn ich ein hover über den playbutton mache, sich ein anderes bild anzeigen lässt ( z.b. ein grösserer playbutton oder andere farbe)

z.b.

<div class="container" style="width: 480px;height: 360px;background: transparent url(hintergrundbild.jpg) no-repeat;">
<img src="playbutton.jpg" border="0" alt="" style="margin: 10px 0 0 10px; img:hover url{playbutton2.jpg}" />
</div>

[onip]

mach ein <a href="#"></a>

a {
display: block;
width: 10px;
height: 10px;
backgrund: transparent url(img.jpg) no-repeat;
}

a:hover {
display: block;
width: 20px;
height: 20px;
backgrund: transparent url(img_hover.jpg) no-repeat;
}

ungetestet