Menu en CSS

[aAdrien]

Bonsoir, j'ai finalisé un sympathique menu en CSS, seulement il me reste deux soucis :

- je n'arrive pas à avoir cet effet (sur mon blog)
- les menus sont cachés sous FF et IE8 (pas sous IE7 !) : capture

Le lien
Merci.

 

[u94082]

Salut,

Pfiou ça pique les yeux :wink:
C'est la propriété z-index qui permet de gérer "l'empilement".

A+

 

[aAdrien]

Merci beaucoup pour la réponse, seulement je vois d'où vient le pb étant donné que les z-index sont croissants.

 

[u94082]

Lorsque tu utilise cette propriété il faut veiller à ce que les éléments concernés aient une position: relative ou fixed.

 

[aAdrien]

Désolé je suis un peu perdu, il faut que la classe .article ait un z-index inférieur au menu ?

 

[kitten13]

Tiens voici 30 exemples de menu full css :

http://sixrevisions.com/css/30-exceptional-css-navigation-techniques/

 

[aAdrien]

Merci c'est gentil, le mien de CSSPlay donc j'en ai déjà vu un paquet.
Seulement, j'aimerai régler mes deux problèmes...

 

[aAdrien]

Je sais que je demande un peu qu'on me mâche le travail j'ai cherché et essayé sans succès alors si pour quelqu'un ça lui prend 5 min...

 

[u94082]

Peut être que si tu mettait le code en question en clair sur le forum ça nous donnerai un peu plus l'envie de t'aider. Parceque la faut se dépatouiller avec la profusion de code css de la plateforme de blog et c'est plutôt rebutant...

 

[aAdrien]

Pardon, c'est vrai que c'est un vrai fouillis !

Le voici :

/*-----Menu CSS-----*/

.nav {padding:0 0 0 10px; margin:0; list-style:none; height:41px; background:url(http://idata.over-blog.com/2/20/35/50/stripe-menu.png) repeat-x; font-family:verdana, arial, sans-serif; font-size:12px; width:100%;}
.nav li {float:left; height:41px;}
.nav li a {display:block; height:41px; width:124px; float:left; line-height:37px; color:#FFFFFF; text-decoration:none; text-align:center;}
.nav li a:hover {position:relative; visibility:visible; line-height:35px; z-index:50;}
.nav li a:hover b {display:block; width:124px; height:37px; background-color:#b00505;}
.nav li a:hover span {display:block; width:124px; height:41px; position:absolute; left:0; top:0; cursorointer; background-color:#B84848;}
.nav li ul, .nav li div {position:absolute; left:-9999px; background-color:#B84848;}
.nav li:hover {position:relative;}
.nav li:hover > a {line-height:37px; color:#FFFFFF;}
.nav li:hover > a b {display:block; width:124px; height:37px; background-color:#B84848;}
.nav li:hover > a span {display:block; width:124px; height:37px; position:absolute; left:0; top:0; cursorointer;}

.nav table {border-collapse:collapse; margin:-1px;}

.nav :hover div {left:0; top:37px; width:200px; height:144px; padding:10px 0; background-color:#B84848; z-index:100;}

.nav :hover ul {padding:0; margin:0; list-style:none; left:0; top:37px; width:200px; height:144px; padding:10px 0; z-index:120;}
.nav :hover ul li {height:27px;}
.nav :hover ul li a {height:27px; line-height:27px; color:#fff; width:196px; text-align:left; text-indent:20px;}
.nav :hover ul li.fly a {background:url(pro_drop9/arrow.gif) no-repeat 150px center;}
.nav :hover ul li a:hover {background-color:#b00505; color:#FFFFFF;}
.nav :hover ul li:hover > a {background-color:#b00505; color:#FFFFFF;}

.nav :hover ul ul, .nav :hover ul div {position:absolute; left:-9999px;}
.nav :hover ul :hover {z-index:200;}
.nav :hover ul :hover div {left:150px; top:-4px; width:200px; height:144px; padding:10px 0; background-color:#B84848; z-index:200;}
.nav :hover ul :hover ul {padding:0; margin:0; list-style:none; left:150px; top:-4px; width:200px; height:144px; padding:10px 0; z-index:250;}
.nav :hover ul :hover ul li a {background:transparent;}
.nav :hover ul :hover ul li a:hover {background-color:#b00505; color:#FFF;}


#holder {width:750px:}
#holder img {margin-top:-4px;}/* @end_terminal */

Merci encore.

 

[u94082]

Ouais, bon... si tu mets un z-index : 1 sur le body, puis 2 sur articles et 3 sur .nav tjrs avec position: relative et en ayant viré tous les autres (z-index) ça donne quoi ?

 

[aAdrien]

J'ai fais ceci :

body {margin:0px; padding:0px; background-color:#FFFFFF;
font: 12px/18px Arial,Helvetica,sans-serif;
background-image: url(http://idata.over-blog.com/2/20/35/50/strip-rouge-haut-3.png); position:relative; z-index:1;}

.article {font-size: 12px; margin-top:0px; padding:0px; margin-bottom:15px; position:relative; z-index:2;}

.nav {padding:0 0 0 10px; margin:0; list-style:none; height:41px; background:url(http://idata.over-blog.com/2/20/35/50/stripe-menu.png) repeat-x; font-family:verdana, arial, sans-serif; font-size:12px; width:100%; position:relative; z-index:3;}

Ca ne fonctionne pas.
(j'ai laissé les positions pour le reste du menu)
PS : Je précise que ça marche depuis le début sous IE7 et voici le menu original.

 

[aAdrien]

J'ai trouvé le problème, tout fonctionne sous FF et IE à part la colonne des modules qui reste dessus.

Par ailleurs j'ai toujours le souci que le bouton reste verrouillé lorsque que le curseur est sur un sous-menu :

- je n'arrive pas à avoir cet effet (sur mon blog)

Merci.

Edit : ce serait <b></b> qui serait en question...

 

[aAdrien]

Re: Menu en CSS [RESOLU]

Résolu !

 

[dadovb]

Résolu !

Modifie le titre de ton sujet :wink:

 

[aAdrien]

Je ne peux plus éditer mon premier msg...