28220 sujets

CSS et mise en forme, CSS3

[RESOLU] [IE >= 5.5][CSS] Transparence de fond non voulue.

Bonjour à tous,

J'ai fait une recherche sur ce forum, infructueuse (car peut être avec les mauvais mots clés). Au besoin, renvoyez moi vers le topic idoine.

Vous trouverez le code relatif au pble à la fin de ce message.

Voici mon pble.
J'ai un menu vertical composé de puces imbriquées sur 2 niveaux.
Ex simplifié :

<ul>
	<li>
		<a href="./accueil.htm" target="_new">Accueil</a>
		<ul>
			<li><a href="./index.htm" target="_new">Essai</a></li>
			<li><a href="./header.htm" target="_new">2</a></li>
		</ul>
	</li>
	<li>
		<a href="./accueil.htm" target="_new">Lien</a
	</li>
	<li>
		<a href="./a3.htm" target="_new">a3</a
	</li>
	<li>
		<a href="./accueil.htm" target="_new">test</a>
		<ul>
			<li><a href="./index.htm" target="_new">lien</a></li>
			<li><a href="./header.htm" target="_new">ancre</a></li>
		</ul>
	</li>
</ul>

Le fond du menu est blanc, avec un hover rouge pale.
Lors que le premier niveau de puces en contient un second, j'affiche ce second niveau à droite du premier, toujours sur fond blanc avec hover rouge pale.
Or le comportement n'est pas le même sous IE et Firefox. Sous Firefox, le fond du second niveau est bien blanc opaque. Mais sous IE, il est blanc transparent !
Et ça m'embête ! Je voudrais que sous IE aussi, le fond de ce second menu soit blanc opaque.

Plutôt que de longs discours et de piètres explications Smiley cligne , je mets ci-dessous le code.

Ce que j'aimerai, c'est que le second menu cache le texte "TEST PROFIL avec menu".


<html>
<head>
<meta http-equiv="content-type" CONTENT="text/html; charset=UTF-8">
<meta http-equiv="content-language" CONTENT="fr">
<script type="text/javascript">
function montre(id) {
	var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
	if (d) {
		d.style.display='block';
	}
}
</script>
<style>
#gauche {
	position: absolute;
	margin: 0 0 0 20px;
}

#gauche ul, #gauche li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}

#gauche li {
	height: 18px;
	width: 140px;
}

#gauche li a { 
	display: block;
	color: #aaa;
	background: #fff;
	font: 11px Arial;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 0px 2px 0px;
	text-align: left;
	border-top: 1px solid #D4D4D4;
}

#gauche a:hover {
	color: #DD0426;
	background: #FFEFEF;
}

#sgauche ul {
	position: absolute;
	margin: -19px 0 0 140px;
	z-index: 100;
	width: 140px;
}

#centre {
	position: absolute;
	left: 185px;
}
</style>
<script language="javascript" src="../js/menu_vertical.js"></script>
</head>
<body onload="montre()">

<div id="gauche">
	<ul>
		<div id="sgauche">
			<li onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="./accueil.htm" target="_new">Profil</a>
				<ul id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
					<li><a href="./contenu.htm">Résumé</a></li>
					<li><a href="./contenu.htm">Modification</a></li>
				</ul>
			</li>
			<li onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="./accueil.htm" target="_new">Projets</a>
				<ul id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
					<li><a href="./contenu.htm">Liste</a></li>
					<li><a href="./contenu.htm">Ajout</a></li>
					<li><a href="./contenu.htm">Modification</a></li>
					<li><a href="./contenu.htm">Suppression</a></li>
				</ul>
			</li>
			<li><a href="./projet.htm" target="contenu">SQUAL</a></li>
			<li><a href="./projet.htm" target="contenu">JRAF</a></li>
			<li><a href="./projet.htm" target="contenu">Socle Vol</a></li>
			<li><a href="./projet.htm" target="contenu">HABIL</a></li>
		</div>
	</ul>
</div>

<div id="centre">
	
	TEST PROFIL avec menu

</div>

</body>
</html>

Modifié par pimousse76 (12 May 2005 - 15:48)
j'ai résolu le pble. il s'agissait bien d'un pble de z-index.
en fait, IE ne doit pas considérer le tag body comme le parent des balises div, à contrario de firefox.

il suffit d'ajouter au css : 
body{
	z-index: 10;	
}


et de modifier : 

#gauche {
	position: absolute;
	margin: 0 0 0 20px;
	z-index: 12;
}
#centre {
	position: absolute;
	left: 185px;
	z-index: 11;
}


bien sur, les valeurs de z-index sont à choisir comme il sied à votre site ouaibe Smiley cligne

@++
Sujet clos
Aller à