Css menu

Résolu
bonsoir
j'ai donc 2 menus :un à gauche qui fonctionne correctement et l'autre qui foire
le code du menu du haut étant assez long je vais juste envoyer le css qui va avec:
body {
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px;
margin: 0;
padding: 0;
background-image: url("image.jpg");

}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;

}
#menuhaut 
{

position: absolute;
height: 100px;
margin-bottom: 20px;
top: 0;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}

#menuhaut dl {
float: left;
width: 12em;
margin-bottom: 20px;

}
#menuhaut dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #FFBA75;
border: 1px solid #00CC99;
margin: 1px;



}
#menuhaut dd {
display: none;
border: 1px solid #00cc99;

}
#menuhaut li {
text-align: center;
background: #FFBA75;
}
#menuhaut li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menuhaut li a:hover, #bovenmenu dt a:hover {
background: #eee;
}


.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;

}

#menu
{
   float: left; 
   width: 120px;
   top: 20px;
}

.element_menu
{
   background-color: #FFBA75;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid #00cc99;
   
   margin-bottom: 20px; 
}




.element_menu h3 
{    
   color: #cc9900;
      background-color: #00cc99; 
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul 
{
   list-style-image: url("images/puce.png"); 
   padding: 0px; 
   padding-left: 20px; 
   padding-right: 20px;
   margin: 0px; 
   margin-bottom: 5px; 
}

.element_menu a 
{
   color: #cc9900;
}

.element_menu a:hover 
{
   background-color: #3399FF;
   color: black;
}



#corps
{
   margin-left: 140px; 
   margin-bottom: 20px; 
   padding: 5px; 
   top: 20px;
   
   color: #00CC99;
   background-color: #FFBA75; 
   background-image: url("images/motif.png");
   background-repeat: repeat-x; 
   
   border: 2px solid #cc9900; 
}

#corps h1 /* Tous les titres h1 du corps */
{
   color: #00CC99;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;

   background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
   
   padding-left: 30px;
   color: #cccccc;
   text-align: center;
   background-color:#00CC99;
}

#corps h3 /* Tous les titres h3 du corps */
{
background-color:#00CC99;
color: #000000;
}

#bas
{
   padding: 5px;

   text-align: center;

   color: #00CC99;
   background-color: #FFBA75;
   background-image: ;
   background-repeat: repeat-x;
   
   border: 2px solid #00cc99;
}

A:link {text-decoration: none} 
A:visited {text-decoration: none} 
A:hover {text-decoration: none} 


Le problème du menu du haut est que les autres elements s'affichent derrière (le corps et le menu à gauche s'affichent en dessous du menu du haut)
Quelqu'un à trouvé l'erreur???
merci

7 réponses

  1. je suis pas spécialiste non plus mais le menu ou dessus reste sur le corps et le menu de gauche....
    1. Contributeur
      Non, il ne s'agit pas de supprimer les 2 autres, mais de les adapter.

      #menuhaut fait 100 px de hauteur et #menu commence à 20 px du haut.
      100-20=80. #menuhaut recouvre #menu de 80 px.

      Essaye de faire commencer #menu à 100 px du haut : “top: 100px;”
      Ou de faire commencer #menuhaut à “left: 120px;” (left-menuhaut = 0 + width-menu = 120)

      Et, juste pour voir, déplace la ligne “z-index” de #menuhaut à #menu avant ces modif.

      Ce ne sont que des idées. Je ne suis pas un spécialiste.
      1. supprimer z-index ça ne fonctionne pas et supprimer les 2 autres ne va pas non plus
        ...........
        1. Contributeur
          Bonjour,

          Essaye.

          - supprime : “z-index:100;”

          - ou :
          “#menuhaut
          {
          height: 100px;”     = 100 px de haut
          et
          “#menu
          {
          top: 20px;”           = commence à 20 px du haut

          Alors, forcément…