28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je rencontre un soucis avec les positionnements en absolute et IE7 et 6... je bataille depuis plusieurs heures a faire des modifs, chercher sur le net... bref, j'ai plus de cheveux Smiley smile

Le soucis doit être évident mais... je bloque Smiley decu

Je me permet donc de voir si l'un d'entre vous pourrait m’apporter un peu de lumière sur le problème.

Voici le html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title><?=$_title;?></title>
<link rel='stylesheet' type='text/css' href='test.css' />
</head>

<body>

<ul id='menu_famille'>

	<li id='fampratique' class='listefamille'>
		Totot
		<div class="subMenu">
			<ul style=''>
				<li>toto1</li>
				<li>toto1</li>
				<li>toto1</li>
				<li>toto1</li>
				<li>toto1</li>
				<li>toto1</li>
			</ul>
		</div>
	</li>

	<li id='fampratique1' class='listefamille'>
		toto2
		<div class="subMenu decale">
			<ul style=''>
				<li>toto2</li>
				<li>toto2</li>
				<li>toto2</li>
				<li>toto2</li>
				<li>toto2</li>
				<li>toto2</li>
			</ul>
		</div>
	</li>

</ul><!-- menu_famille -->
<div style='height:20px;background:#ccc;'>toto</div>


</body>
</html>


et la css : ( avec de la déco pour bien cerner le problème )


body,html{	position: relative;}
*{margin:0;padding:0;}
ul#menu_famille {
	position: relative;
   background:#666;
   padding:10px;

	}
ul#menu_famille li.listefamille{
	position: relative;
	padding:10px;
	background:#ccc;
	position: relative;
	width:400px;
	border:solid 2px #000;
	}
div.subMenu{
}
ul#menu_famille li.listefamille div.subMenu ul{
	position:absolute;
	height:300px;
	top:5px;
	left:200px;
	z-index:2;
		width:250px;
	background:green;
	zoom:1;
	border:solid 2px #000;
	}
ul#menu_famille li.listefamille div.subMenu ul li{
 	border:solid 2px #000;
	width:150px;
	}
ul#menu_famille  li.listefamille div.decale ul{
	left:300px;
	top:-20px;
	background:red;
	}


Le soucis :
les ul li sont en relatif afin de positionner le ul enfant en absolute

Sous IE7 et 6, le ul li ul positionné en absolute passe sous le second
ul li (en relatif )

J'ai ajouter un div sous la structure des listes, si je le positionne en relatif, il passe également sur les blocs en absolute

Bref, j'en perds mon basque Smiley smile

J'ai une url de test pour le rendu, si vous le souhaitez...

Merci
Modifié par jmi (12 Jul 2012 - 16:41)
Bonjour,

je pense que tu devrais ajouter un z-index sur tes ul en relative. Tes ul en absolute sont positionnées en fonction de leur parent positionné, à savoir tes ul relative - sauf qeu dans le flux, le second ul relatif vient naturellement au-dessus du premier. Tu peux donc mettre tout ce que tu veux sur ton premier ul en absolute, ça ne devrait pas fonctionner.

Est-ce que c'est clair ? Je crois que j'emberlificotte un peu Smiley confus
Clair oui,
par contre le ul#menu_famille en relatif, c'est pour tester, je ne devrais pas en avoir besoin, le li suivant qui contient le ul en absolute 'devrait' suffir.

J'ai quand même testé... rien ne change Smiley decu
Modérateur
Il existe un bug connu sur IE <= 7 avec les z-index, qui fait qu'il faut placer du z-index sur le premier élément positionné (absolute/relative) d'un arbre d'éléments positionné, et parfois descendre dans la hiérarchie.

Dans ce cas c'est ul#menu_famille