28173 sujets

CSS et mise en forme, CSS3

[Résolu][IE6/7] Background d'un div qui en recouvre un autre

Salut à tous,

Voilà j'ai ce petit soucis depuis hier aprem, et je vois pas comment m'en tirer... Tout fonctionne comme je le désire sous fifox mais sous IE c'est pas le cas !

Alors je vous explique rapidement :

J'ai 3 div.

-----------
| DIV #1 |
-----------
-----------
| DIV #2 |
-----------

Et div#1 contient un autre div (une sorte de menu) que j'affiche en javascript lors du clic sur un bouton. Ce qui donne cette structure en gros :

<div1>
<div menu></div>
</div1>

<div2></div2>


Seulement le div menu, lorsqu'il s'affiche, passe derrière la background-image du div 2, et du coup est "inatteignable"...et j'ai aucune idée de ce qui provoque ça, ni de comment m'en sortir ?! J'ai essayé de jouer avec les z-index mais rien n'y a changé...! Smiley fache

Est-ce que l'un(e) d'entre vous saurait m'aider ?
Merci d'avance Smiley smile


PierreAd
Modifié par PierreAd (13 Jun 2007 - 00:18)
Salut,

Sans page en ligne (ou au moins l'intégralité du code html et css) j'ai bien peur que personne ne puisse te répondre Smiley decu
Au temps pour moi, j'étais un peu pressé ce matin, j'ai pas eu le temps de mettre en ligne tout ce dont il s'agissait !!! Smiley rolleyes 


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
	<style type="text/css">
		@import url(/style.css);
	</style>
</head>

<body>

	<div id="div1">
		<div id="divMenu">
			Ligne 1<br />
			Ligne 2<br />
			Ligne 3<br />
			Ligne 4
		</div>
	</div>
	
	<div id="div2"></div>


</body>
</html>



div#div1 {
	z-index:1;
	position:absolute;
	top:1em;
	left:1em;
	width:10em;
	height:5em;
	background-image:url('img/bg.png');
	border:1px solid black;
}

div#div2 {
	z-index:2;
	position:absolute;
	top:6.5em;
	left:1em;
	width:10em;
	height:5em;
	background-image:url('img/bg.png');
	border:1px solid red;
}
div#divMenu {
	z-index:5;
	position:absolute;
	top:4em;
	left:4em;
	width:5em;
	height:6em;
	color:#CCCCCC;
	background-color:#333333;
}


Voilou le code ! L'image de background est simplement une petite image de fond de 1x1, en png. En fait je voudrais que mon #divMenu passe au dessus du #div2 (et pas derrière lui...).

La seule solution que j'ai trouvé est de sortir le #divMenu de son #div1 conteneur, et là ça fonctionne... Comment cela se fait-il ? N'est-il pas possible d'obtenir le résultat escompté en conservant les deux div imbriqués (plus logique au final dans la structure de ma page)...?

Merci de votre aide,


PierreAd
Salut,

Ordonne tes z-index comme suit et contemple la magie Smiley cligne :
zindex_de_Div2 < zindex_de_Div1 < zindex_de_DivMenu
marcv a écrit :
Salut,

Ordonne tes z-index comme suit et contemple la magie Smiley cligne :
zindex_de_Div2 < zindex_de_Div1 < zindex_de_DivMenu

Roh super...dire que j'avais pas essayé cette possibilité dans mes z-index... J'avais simplement donné un z-index de mon divMenu supérieur au z-index des 2 autres div, sans me soucier de "l'ordre" de ceux-ci !

Merci beaucoup de ton aide, problème résolu ! Smiley smile
Sujet clos
Aller à