Discussion :

[Ladgalen]

Bonjour

Je fais un site web avec une barre de menu (rien de plus classique). Je fait un peu de css et
donc j'ai definit des div et notament 1 pour la barre de menu.

Ensuite je definit une classe pour les li et a pour faire mon menu sur une ligne dans la barre
du menu. Mon probleme c'est que les element des Li ne sont pas positionner sur la ligne.
Si je trace une bordure autour de la barre de menu et autour des Li, on voit que les cadres
des li sont plus bas que la ligne du div dans lequel ils se trouve. Je pense que c'est plus clair
sur l'image.



Je vous donne le contenu de la css en ce qui concerne le menu

Merci d'avance !

Voila les div

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#barremenu {
    border: 1px solid red;  
    width: 820px;
    position: relative;
    left: -10px;
    height: 20px;
    margin-top:5px;
}
#gauchemenu {
    background: url(img/left.png) top left no-repeat;
}
#centremenu {
    height: 20px;
    text-align: right;
    position: relative;
    text-align: right;
    margin-left: 10px;
    margin-right: 10px;
    background: url(img/fond-menu.png) top left repeat-x;
}
#droitemenu {
    background: url(img/right.png) top right no-repeat;
}

et voila pour les li :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.menugauche {
    list-style: none;  /* supprime les puces */
    margin: 0;
    padding:0;
}
 
.menugauche li {
    float: left;
    color: #FFFFFF ;                  /* couleur du texte */
    font-family: Arial;
    font-size: 16;
    font-weight: bold;
    color: #000000;
    line-height: 3ex;
}
 
.menugauche li a {
    color: #FFFFFF; 
    height: 20px;
    padding: 0px 20px ;               /* gere l'espacement */
    text-align: center ;
    text-decoration: none;            /* supprime l'aspect lien */
    border: 1px solid red;  
}
 
.menugauche li a:hover, .menugauche li a:focus, .menugauche li a:active { 
    background: url(img/focus.png) repeat-x;
}

[c_s_s]

Bonjour,

Aurais-tu la code HTML de ta barre de navigation, ça peut être utile.

Dans .menugauche li

- font-size: 16; <--- il manque l'unité.

- line-height: 3ex; <--- tu as toujours le probleme en commentant cette ligne ou en changeant d'unité ?

.menugauche li a

Tu précises une hauteur (20px), mais tu ne définis pas le lien comme un block (display: block;).


Ce ne sont que des pistes, je ne peux rien tester sans le HTML.