Sous-menu ne passant pas par dessus le contenu

[corven]

Bonjour à tous !

Me voici avec un petit soucis sur un design ... plus précisément sur le menu déroulant.

Expliquons donc la chose ...

Mon premier problème a été que lorsque le sous-menu ce déploie, celui ci faisait agrandir le bloc du menu et ne passais pas au dessus du contenu, ceci sur tout les navigateurs avec quelques variantes ...

J'ai réglé le problème sous Firefox en mettant des propriétés de position et deux z-index. Résultat, c'est nickel ...

Maintenant le soucis c'est que ça ne fonctionne pas sous IE (comme d'hab quoi !). Le menu déroulant ne veux pas passer par dessus le contenu ...

Je vous donne l'adresse pour un aperçu :

Aperçu du problème sur l'onglet "Forum"

Le css :

body {
behavior: url(css/csshover.htc);
background-color: #575757;
margin-top: 6px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 30px;
text-align: center;
min-width: 1000px;
}
body div#liste_menu ul li ul {
display: none;
}
div#global_site {
width: 999px;
margin-top: 6px;
margin-left: auto;
margin-right: auto;
text-align: left;
}



/********************************** BARRE AVEC DATE - LIEN ADMIN ET HEADER */
/*****************************************************************/
div#barre_sommet {
background-image: url('../images/structure_site/barre.gif');
background-repeat: no-repeat;
width: 999px;
height: 22px;
}
div#barre_sommet p {
display: inline;
font-family: verdana;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
line-height: 22px;
margin-left: 10px;
}
div#barre_sommet a.admin {
font-family: verdana;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
float: right; line-height: 22px;
margin-right: 10px;
margin-top: -22px;
}
div#barre_sommet a.admin:hover {
color: #FF9900;
text-decoration: underline;
}
div#barre_sommet a.admin:visited {
color: #FFFFFF;
text-decoration: none;
}
div#image_header {
background-image: url('../images/structure_site/header.gif');
background-repeat: no-repeat;
width: 999px;
height: 128px;
margin-top: 4px;
}




/********************************** MENU*/
/****************************************/
div#liste_menu {
position:relative;
z-index: 2;
width: 999px;
height: 184px;
margin-top: -16px;
background-image: url('../images/structure_site/testimg.gif');
background-repeat: repeat-y;
}
/***correction IE***/
*html div#liste_menu {
width: 999px;
margin-top: 0px;
display: block;
}
div#liste_menu ul li {
list-style-type: none;
float: left;
text-align: center;
font-family: verdana;
font-size: 13px;
}
div#liste_menu ul li a {
display: block;
background-image: url('../images/structure_site/bouton_off.gif');
background-repeat: no-repeat;
width: 131px;
height: 47px;
}
div#liste_menu ul li a:link, div#liste_menu ul li a:visited {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
div#liste_menu ul li div:hover a.t {
text-decoration: none;
color: #FF9900;
background-image: url('../images/structure_site/bouton_on.gif');
font-size: 14px;
font-weight: bold;
padding-top: 5px;
}

div#liste_menu ul li a.bouton_accueil {
display: block;
background-image: url('../images/structure_site/bouton_accueil_off.gif');
background-repeat: no-repeat;
width: 131px;
height: 47px;
}
div#liste_menu ul li div:hover a.bouton_accueil {
text-decoration: none;
color: #FF9900;
background-image: url('../images/structure_site/bouton_accueil_on.gif');
font-size: 14px;
font-weight: bold;
padding-top: 5px;
}
div#liste_menu ul li a.bouton_forum {
display: block;
background-image: url('../images/structure_site/bouton_forum_off.gif');
background-repeat: no-repeat;
width: 131px;
height: 47px;
}
div#liste_menu ul li div:hover a.bouton_forum {
text-decoration: none;
color: #FF9900;
background-image: url('../images/structure_site/bouton_forum_on.gif');
font-size: 14px;
font-weight: bold;
padding-top: 5px;
}

div#liste_menu ul li div#info_pratiques {
list-style-type: none;
float: left;
text-align: center;
font-family: verdana;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
width: 178px;
height: 149px;
margin-left: 90px;
}
/***correction IE***/
*html div#liste_menu ul li div#info_pratiques {
margin-left: 45px;
}



/********************************** SOUS MENU*/
/*********************************************/
div#liste_menu ul li ul li {
margin-bottom: -1px;
margin-top: -1px;
margin-left: -40px;
list-style-type: none;
float: none;
text-align: center;
font-family: verdana;
font-size: 11px;
background-color: #FDC346;
}
div#liste_menu ul li ul li a {
display: block;
background-image: url('../images/structure_site/bg_sous_menu_off.gif');
background-color: #EEEEEE;
width: 131px;
height: 15px;
}
div#liste_menu ul li ul li a:link, div#liste_menu ul li ul li a:visited {
text-decoration: none;
color: #414141;
font-weight: bold;
}
div#liste_menu ul li ul li a:hover {
text-decoration: none;
color: #FFFFFF;
background-image: none;
background-color: #FF9900;
font-size: 12px;
font-weight: bold;
}

div#liste_menu ul li:hover ul, div#liste_menu ul li ul:hover {
display: block;
}


div#liste_menu ul li div:hover a.t {
text-decoration: none;
color: #FF9900;	
background-image: url('../images/structure_site/bouton_on.gif');
font-size: 14px;
font-weight: bold;
padding-top: 5px;
}




/********************************** MISE EN PLACE DES BLOC CONTENEUR-CENTRAL-COLONNE DROITE-PIED*/
/*******************************************************************************/
div#conteneur {
z-index: 1;
width: 999px;
height: auto;
margin-top: 0px;
position:absolute;
}
div#central {
position: relative;
left: 63px;
width: 609px;
height: auto;
background-image: url('../images/structure_site/testimg02.gif');
background-repeat: repeat-y;
float: left;
}
div#colonne_droite {
width: 270px;
height: auto;
float: left;
background-image: url('../images/structure_site/testimg04.gif');
margin-left: 100px;
}
div#pied_contenu_central {
width: 609px;
height: 20px;
background-image: url('../images/structure_site/pied_contenu_central.gif');
background-repeat: no-repeat;
}
div#pied_contenu_central p {
font-family: Verdana;
color: #707070;
font-size: 8px;
text-align: center;
line-height: 7px;
}
div#pied_colonne_droite {
width: 270px;
height: 20px;
background-image: url('../images/structure_site/pied_colonne_droite.gif');
background-repeat: no-repeat;
}




/********************************** PAGE ACCUEIL*/
/************************************************/

/******CENTRAL*******/
div#accueil_presentation {
background-image: url('../images/page_accueil/accueil_presentation.gif');
background-repeat: no-repeat;
width: 609px;
height: auto;
padding-top: 35px;
margin-bottom: 20px;
}
div#accueil_presentation p {
font-family: verdana;
font-size: 11px;
color: #FFFFFF;
padding-left: 15px;
padding-right: 15px;
text-align: justify;
}
div#derniere-news {
background-image: url('../images/page_accueil/actualite_dernieres_news.gif');
background-repeat: no-repeat;
width: 609px;
height: 90px;
padding-top: 35px;
}
div#news_precedentes {
background-image: url('../images/page_accueil/actualite_news_precedentes.gif');
background-repeat: no-repeat;
width: 609px;
height: 200px;
padding-top: 35px;
margin-bottom: 30px;
}

/******COLONNE DROITE*******/
div#colonne_droite div#bloc01 {
background-image: url('../images/page_accueil/partenaires.gif');
background-repeat: no-repeat;
width: 270px;
height: 200px;
padding-top: 35px;
margin-bottom: 20px;
}
div#colonne_droite div#bloc02 {
background-image: url('../images/page_accueil/derniers_tuto.gif');
background-repeat: no-repeat;
width: 270px;
height: 100px;
padding-top: 35px;
margin-bottom: 20px;
}
div#colonne_droite div#bloc03 {
background-image: url('../images/page_accueil/derniers_dossiers.gif');
background-repeat: no-repeat;
width: 270px;
height: 100px;
padding-top: 35px;
margin-bottom: 20px;
}
div#colonne_droite div#bloc04 {
background-image: url('../images/page_accueil/livre_or.gif');
background-repeat: no-repeat;
width: 270px;
height: 100px;
padding-top: 35px;
margin-bottom: 20px;
}
div#colonne_droite  p {
font-family: verdana;
font-size: 11px;
color: #FFFFFF;
padding-left: 15px;
padding-right: 15px;
text-align: justify;
}

Pour le code xhtml vous avez l'affichage de la source.

Voilà, vous avez tout ... me reste plus qu'à faire un remerciement d'avance !

Alors merci de votre future aide !

PS: Ne vous souciez pas de la compatibilité xhtml ... ceci n'est qu'un brouillon, le fichier final est conforme ... [lol]

[Shinuza]

 <li>
<div>

<a href="#" class="bouton_accueil"> Accueil 

</div>
</li>

Faut penser à éliminer ce genre de chose, tu as des div imbriquées dans tout les sens, et à mon avis la moitiée sont inutiles

[Yangzebul]

Ce serait sympa aussi de formater un peu ton css avec des retours chariots et des tabulations. Il faut prendre en compte que nous n'avons pas écrit ton fichier alors c'est plus dur pour nous de nous y repérer. Lorsque je regarde ton post et que je vois le cafarnaeum que ça à l'air d'être cela ne me donne pas envie de me plonger dedans.

Si tu fais le petit effort de rendre tes sources plus lisibles avant de les poster tu auras assurément plus de réponses et plus rapidement.

[corven]

Voilà, j'ai éditer, c'est déjà un peu plus clair pour vous là ...

Par contre si vous voulez regarder tout ca en local il vous faudra un autre fichier que vous ne pouvez avoir donc si vous voulez faire en local dites le et je mets le fichier ...

[Yangzebul]

Oui je vois à peu près le problème, j'ai eu affaire à la même chose... Tu t'est lancé dans un truc bien galère là.

Le truc c'est quand fait lorsque tu passe en :hover ton <ul> de sous menu repasse en "display: block;". Tout ce qu'il y'a de plus normal tu me dira, il faut bien qu'il réapparaisse, mais le problème c'est qu'il est toujours dans le flux et que donc la hauteur générale du contenu est recalculée (que tu utilise un z-index ou non). En fait c'est tout à fait logique, tellement logique que je me demande pourquoi IE est le seul à réagir comme ça, c'est rare pour moi de dire ça mais il me semble qu'ici ce sont bien firefox, opera et safari qui se plantent.

La solution, bah y'en as pas 15 000, tu dois retirer ton sous-menu du flux courant soit en lui mettant un float (je vois pas ce que tu pourrais faire avec un float dans ce cas la mais bon...) soit avec "position: absolute".

Tiens si ca t'interesse voila ce que j'avais fait, ici même si ma conception est différente (liste de définition>ul avec sprite css) le problème est le même : lorsque il y'a un rollover mon sous-menu qui est en "position: relative" est réinséré dans le flux et donc la hauteur du parent est recalculée...

Bon c'est hébergé sous lycos donc il me nique mon doctype et la page est toute bugué, mais je t'ai mis un rar pour le mater en local. Sinon sur IE tu verra en plus quelques bugs parce que je me suis refusé d'émuler la pseudo-classe hover et d'utiliser le "box model hack" (en même temps c'était un exo et mon prof corrigait sur un mac alors j'allais pas me casser le cul... )

http://membres.lycos.fr/ywg/menucss/index.htm

http://membres.lycos.fr/ywg/menucss/www2.rar (93ko)

[corven]

Bon bah merci ! Je vais plancher sur ça maintenant que j'ai une piste ...

Je vous tiens au courant de l'évolution !

Pour le float, y'aurait moyen, mais ça m'obligerait à bien compliqué le code en faisant deux colonnes, la première qui s'arrêterait avec l'onglet forum et la seconde pour l'info pratique. Dans ce cas là un float est possible mais un peu pas pratique à mettre en place, je vais essayer avec la position absolue en premier ...

Encore merci à toi

[Cubic-Design]

Les absosute c'est vraiment quand tout est static en général. certes ça sera plus compliqué à coder en float mais ça risque de poser moins de problème de rendu par la suite

[Yangzebul]

En même temps son site à une largeur fixe, donc sur un menu déroulant vertical ça ne pose aucun problème.