[Résolu] Pour changer: problème de z-index dans un menu déroulant...

Bonsoir à tous...

Dans la série : la question à la con du vendredi soir, je voudrais...

Actuellement je suis en train de m'essayer aux menus déroulants et à la notion de z-index, et j'avoue patauger un peu. Je voulais faire un essai pour mon site perso pour commencer...

Je me suis inspirée d'un menu trouvé sur le web (CSS Play) et comme une newbie que je suis, j'ai "monté" mon menu dans une page html externe où il fonctionne très bien.
Le menu seul est visible ici : http://dreo.dreo.free.fr/menu/

Mais forcément quand je l'insère dans ma page, je me rerouve face à un problème de décalage, et là, je patauge complètement... J'ai essayé quelques modifs d'après mes lectures sur ce forum et d'autres, mais je suis en train de m'avouer vaincue et c'est pourquoi je sollicite vos petits cerveaux sûrement plus éclairés que le mien sur la question !

Mon site est visible ici : http://dreo.loremipsum.free.fr/dotclear/index.php

Je colle également ici mon layout :

@charset "utf-8";
/* CSS Document */
@import url("style.css");

/*--- Les éléments généraux -----------------------------------------------------*/	
body {
margin: 0;
padding: 0;
background-color: #EEE;
}

p, ul, li {
margin:0;
padding: 0;
}

img{
border: none;
}

a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}

/*--- #conteneur -----------------------------------------------------*/	
#conteneur {
	position: relative;
	width: 1015px;
	z-index:0;
}

	/*--- #page (in #conteneur) -----------------------------------------------------*/	
	#page {
	float:left;
	width: 505px;
	background:url(images/fondpage.png) repeat-y;
	}
	
		/*--- #page ul (in #page > #conteneur) -----------------------------------------------------*/	
		#page ul{
		line-height: 40px;
		text-align: right;
		padding-right: 35px;
		}		
		#page ul li {
		display:inline;
		}	
		
		/*--- #header (in #page > #conteneur) -----------------------------------------------------*/	
		#header {
		width: 500px;
		height: 155px;
		}
	
		/*--- #menu (in #page > #conteneur) -----------------------------------------------------*/	
		#mainmenu {
		margin-right:5px;
		padding: 0 30px;
		position:relative; 
		z-index:100;
		}
	
		/*--- #content (in #page > #conteneur) -----------------------------------------------------*/	
		#content {
		margin-right:5px;
		padding: 30px;
		}	
		
		/*--- #news (in #page > #conteneur) -----------------------------------------------------*/	
		#news {
		padding: 30px;
		background-color:#333333;
		background-repeat: no-repeat;
		margin-right: 5px;
		}		
		
		/*--- #baspage (in #page > #conteneur) -----------------------------------------------------*/	
		#baspage {
	background: url(images/baspage.png) bottom left no-repeat;
	height: 25px;
		}


	/*--- #sidebar (in #conteneur) -----------------------------------------------------*/	
	#sidebar {
	float:left;
	width: 515px;
	height: 350px;
	margin-left: -5px;
	background-image: url(images/sidebartop.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}

	

	/*--- #footer (in #conteneur) -----------------------------------------------------*/	
	#footer {
	float:left;
	width:100%;
	padding: 30px 30px 150px 30px;
	}

ainsi que la partie de ma feuille de style qui concerne le menu :

		/*--- #menu (in #page > #conteneur) -----------------------------------------------------*/	
		.menu, .menu ul {
		list-style-type:none; 
		padding:0; 
		margin:0; 
		font-family:arial, sans-serif;
		}
		
		.menu li.top {display:block; float:left; position:relative;}
		
		.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
		
		.menu li.top a.top_link {
		display:block; 
		float:left; 
		height:35px;}
		.menu li.top a span {
		position:absolute; 
		left:-9999px; 
		top:0; 
		z-index:100; 
		font-size:10px;
		}
		
		.menu li.p1 {width:65px; background:url(images/menu/home_1.gif) no-repeat;;}
		.menu li.p2 {width:90px; background:url(images/menu/products_1.gif) no-repeat;;}
		.menu li.p3 {width:88px; background:url(images/menu/services_1.gif) no-repeat;;}
		
		.menu li a#presentation {width:65px; background:url(images/menu/home_0.gif) no-repeat;}
		.menu li a#portfolio {width:90px; background:url(images/menu/products_0.gif) no-repeat;}
		.menu li a#liens {width:88px; background:url(images/menu/services_0.gif) no-repeat;}
		
		.menu a:hover {visibility:visible;} /* for IE6 */
		.menu li:hover { position:relative; z-index:300;} /* for IE7 */
		
		.menu li a#presentation:hover, .menu li:hover a#presentation,
		.menu li a#portfolio:hover, .menu li:hover a#portfolio,
		.menu li a#liens:hover, .menu li:hover a#liens{
		background:transparent;
		}
		
		.menu ul{
		position:absolute; 
		left:-9999px; 
		top:-9999px; 
		width:0; 
		height:0;
		}
		
		.menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;}
		.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
		.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
		.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;}
		 
		.menu :hover ul :hover ul{
		left:90px; 
		top:-4px; 
		background: #fff; 
		padding:3px 0; 
		border:1px solid #888; 
		white-space:nowrap; 
		width:93px; 
		z-index:300; 
		height:auto; 
		z-index:400;
		}

Voilà, j'espère avoir été assez claire, et que certains d'entre vous auront le courage de se pencher sur mon petit soucis !
Modifié par Dreo (02 Dec 2007 - 12:51)

Dreo a écrit :
Euh... parce que je m'y retrouve mieux comme cela... Ca te va ?

je n'avais pas l'intention de me montrer agressif... simplement dire que cette notation est valide. Tu pourrais écrire par exemple :

<!-- ================================= mon commentaire ==================================================================================== -->

Bon ben sur ce... A+
Modifié par Heyoan (30 Nov 2007 - 23:08)

Je ne t'ai pas trouvé agressif du tout, simplement cela vient de ma façon de travailler, ce n'est sûrement pas la bonne, certes, et je voulais seulement t'expliquer qu'il s'agit uniquement d'un document de travail et que je pense que cela n'a pas grande importance...
Désolée si à mon tour, j'ai pu paraitre agressive...
Modifié par Dreo (30 Nov 2007 - 23:48)

Dreo a écrit :
Désolée si à mon tour, j'ai pu paraitre agressive...

No problemo !

Bonsoir,

Dreo a écrit :
je voulais seulement t'expliquer qu'il s'agit uniquement d'un document de travail et que je pense que cela n'a pas grande importance...

Je pense que sur ce point tu te trompes. Tu remarques bien aujourd'hui que quand tu rencontres un problème donné et que l'on veut vérifier (toi ou quelqu'un qui t'aide) si une erreur de syntaxe peut être liée au problème... eh bien, ça n'est pas possible, car le code est «parasité» et les résultats du validateur sont donc illisibles.

Voilà, juste pour dire que la prochaine fois utiliser une syntaxe de commentaires valide même dans la phase de développement initiale ça peut aider.

Dreo a écrit :
Je me suis inspirée d'un menu trouvé sur le web (CSS Play)

Hum, je sens que je vais pas tarder sur ce sujet moi...
(Pour préciser rapidement avant de prendre la poudre d'escampette: les menus déroulants posent quelques problèmes d'accessibilité et d'ergonomie, et représentent donc une solution pas si terrible que ça. Par contre, les «débutants» au sens large trouvent ça très glamour, et se lancent généralement bille en tête dans l'implémentation de tels menus malgré les difficultés techniques qui les dépassent parfois un peu, voire beaucoup. Enfin, dans ce sujet on parle d'un menu déroulant à base de HTML bardé de commentaires conditionnels pour «tricher» sur le code vu par IE 6, avec utilisation de :hover en CSS... bref, typiquement les bidouillages sympathiques de Stu Nicholls sur CSSplay: marrant, mais à prendre avec des pincettes avant de songer à les utiliser sur un vrai site!)


Rapidement: tu as stylé un ul qui est placé en haut à droite de ta page via le sélecteur #page ul (dans deux fichiers différents: layout.css et style.css). Seulement voilà, le sélecteur #page ul est mauvais, car trop large: il ne s'applique pas juste au ul prévu, mais à tous les ul enfants ou descendants de div#page, dont les ul de ton menu déroulant.

Il faudrait corriger ce sélecteur pour qu'il pointe uniquement vers le bon élément (ici, je pense qu'il faudra rajouter un identifiant au ul en question dans le code HTML).

Dreo a écrit :
Et puis surtout je voulais essayer de comprendre la notion de z-index qui me parait assez floue

La propriété z-index permet, pour un élément positionné en absolu, fixe ou relatif, de préciser sa place dans la pile. Les valeurs les plus élevées sont au premier plan, et les plus faibles sont au second plan.

Soit le code suivant:

[b]HTML:[/b]
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
<div id="test4">...</div>

[b]CSS:[/b]
div {height: 100px; width: 100px;}
div#test1 {position: absolute; z-index: 4;}
div#test2 {position: absolute; z-index: 2;}
div#test3 {z-index: 10;}
div#test4 {position: relative; z-index: 8;}

div#test1 sera au premier plan, en dessous on aura div#test2, en-dessous encore on aura div#test3 (qui ne se place pas au-dessus malgré un z-index de 10 car il n'est pas positionné). Enfin, div#test4 sera le plus haut de la pile, et s'affichera en dessous des autres blocs (repoussé vers le bas par div#test3 qui n'est pas positionné).

On pourra lire:
http://www.w3.org/TR/CSS21/visuren.html#z-index (en anglais)
http://developer.mozilla.org/fr/Comprendre_le_z-index_en_CSS (en français, article complet avec exemples)
Modifié par Felipe (19 Feb 2012 - 15:44)

Heyoan a écrit :
Tu pourrais écrire par exemple :

<!-- ================================= mon commentaire ==================================================================================== -->

Bon ben sur ce... A+

Effectivement c'est beaucoup mieux, je tombe du coup à 35 erreurs, ce qui est encore loin d'être idéal mais ça fait déjà moins peur...