Jump to content

Sous-menu ne passant pas par dessus le contenu


Recommended Posts

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]

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ...

Link to comment
Share on other sites

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à. :transpi:

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... :ouioui: )

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

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

Link to comment
Share on other sites

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 :yes:

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...