[résolu] Images positions et z-index

Voilà mon petit problème :

J'ai 3 images (pierre1, pierre2 et portail), dans un html basique ainsi :

<img src='design/index/pierre1.gif' class='decor-fond' id='pierre1' />
    <img src='design/index/pierre2.gif' class='decor-fond' id='pierre2' />
    <img src='design/index/portail.png' class='decor-portail' />

Les 2 pierres sont tout au fond de ma page, l'une vers la droite de l'écran, l'autre vers la gauche..

Au-dessus, j'ai la 3ème image "portail", au milieu de ma page.

En résolution assez large (au-dessus de 1280), les deux pierres sont de chaque coté du portail et rien ne se superpose.

En résolution "classique" (1024), les deux pierres sont sensés se glisser sous le portail qui lui doit rester au centre.

Hors, en 1280, ça passe très bien... En 1024, seuls la pierre de droite se décale. Le portail pas du tout...

Le CSS :

img.decor-fond
{
	position:relative;
	z-index:1;
}
img.decor-portail
{
	position:fixed;
	z-index:3;
	margin-right: auto;
	margin-left: auto;
	margin-top : 10px;
	width:593px;
}
img#pierre1
{
	float:left;
	margin-left:45px;
	margin-top:155px;	
}
img#pierre2
{
	float:right;
	margin-right:10px;
	margin-top:135px;	
}

Et une page web pour ceux qui voudraient voir :
http://yui-aventure.jeux-lothi.com/index.php



(le truc doit pas être accessible pour navigateur d'écran, le jeu à l'intérieur n'est pas prévu pour à l'heure actuelle, et je ne maintiens que pour IE8 et +, avec dégradation pour IE7, pas de soutenance de IE6)


Et voilà ce à quoi je dois arriver au final sur du 1024 :

http://yui-aventure.jeux-lothi.com/screen/designv1.jpg
Modifié par Lothindil (18 Jan 2013 - 12:10)

Désolé du double post... Mais en ôtant les 2 pierres, je me rends compte que mon portail ne se centre pas du tout... donc, je vais peut-être commencé par là...

edit : c'est fait... mais ça n'améliore rien...

J'ai juste ajouté "display:block" sur le portail...
Modifié par Lothindil (18 Jan 2013 - 11:00)

C'est bon, j'ai trouvé ^^ j'ai tout repris depuis le départ en absolute et ça marche !

Le CSS :

img.decor-fond
{
	position:absolute;
	z-index:1;
}
img.decor-portail
{
	position:absolute;
	z-index:3;
	left:50%;margin-left:-297px;
	display:block;
	width:593px;
}
img#pierre1
{
	top:155px;
	left:20px;	
}
img#pierre2
{
	top:135px;
	right:10px;	
}