Décalage barre de menu avec hover

Version imprimable

Bonjour,

J'ai un problème au niveau de ma barre de menu. Lorsque la souris passe sur un item, la couleur de fond est plus foncée mais j'ai un décalage sur la gauche (surement dû aux bordures qui séparent chaque item). Voici mon site pour mieux voir de quoi je parle : www.spexdiscount.com

Voici mon code css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.main_menu a 
{
    width: 90px;
    height: 34px;
    display: inline-block;
    padding-top: 10px;
    vertical-align: top;
    font-size: 1.1em;
    text-decoration: none;
    color: white;
    text-align: center;
    font-weight: bold;
    font-family: Cambria;
    border-right: 1px solid #D3D3D3;
    border-right-color: #666666;
}
 
.main_menu a:hover {
 
	background: url(../images/menu_gradient_over.png) repeat-x;
 
}

Et le code aspx :

Code:

1
2
3
4
5
6
7
8
9
<div class="main_menu">
      <a href="http://www.spexdiscount.com" class="menu_logo" title=""><img src="http://www.spexdiscount.com/images/logo_3d.png" alt="Spexdiscount Designer Eyewear" id="logo_home" style="border:none;"/></a>
      <a href="http://www.spexdiscount.com/UK/catalogue.aspx/Glasses?Eyewear=Glasses" title="" >Glasses</a>
      <a href="http://www.spexdiscount.com/UK/catalogue.aspx/Sunglasses?Eyewear=Sunglasses" title="">Sunglasses</a>
      <a href="http://www.spexdiscount.com/UK/catalogue.aspx/Sunglasses/Prescription?Eyewear=Sunglasses&amp;Lenses=Prescription" class="menu_long" title="">Prescription Sunglasses</a>
      <a href="http://www.spexdiscount.com/UK/catalogue.aspx/Clearance?Sale=Clearance"  title="">Clearance </a>
      <a href="http://www.spexdiscount.com/UK/FAQ.aspx" title="" >FAQ</a>
      <a href="http://www.spexdiscount.com/UK/Testimonials.aspx" title="">Reviews</a>
      <a href="http://www.spexdiscount.com/UK/ContactUs.aspx" title="" >Contact Us</a>

Merci de m'aider, je tourne en rond !

Bonjour,
tu es en présence de whitespace qui sont du à tes retours à ligne liés au rendu display:inline-block.

On peut régler ce soucis de plusieurs façons:
1/ supprimer tous les retour lignes en mettant ton code à la queue leu leu

Code:

<a href="http://www.spexdiscount.com" class="menu_logo" title=""><img src="http://www.spexdiscount.com/images/logo_3d.png" alt="Spexdiscount Designer Eyewear" id="logo_home" style="border:none;"/></a><a href="http://www.spexdiscount.com/UK/catalogue.aspx/Glasses?Eyewear=Glasses" title="" >Glasses</a>

plus très lisible mais le plus efficace.
2/ mettre les retours ligne en commentaire
Code:

1 2 3 <a href="http://www.spexdiscount.com" class="menu_logo" title=""><img src="http://www.spexdiscount.com/images/logo_3d.png" alt="Spexdiscount Designer Eyewear" id="logo_home" style="border:none;"/></a><a href="http://www.spexdiscount.com/UK/catalogue.aspx/Glasses?Eyewear=Glasses" title="" >Glasses</a><a href="http://www.spexdiscount.com/UK/catalogue.aspx/Sunglasses?Eyewear=Sunglasses" title="">Sunglasses</a><!--
c'est quand même plus lisible.
3/ changer ton approche, mettre tesélément en rendu display:block et de les passer en float:left.

Il en existe d'autres mais il me semble que celles ci sont les plus "propres".

Nota: tu aurais pu utiliser une liste UL -> LI

Bonjour,
pour reprendre la 3ème solution de NoSmoking (la plus "propre") :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.main_menu a 
{
    min-width: 90px; /* Modifié : largeur MINI */
    height: 34px;
    display: block; /* Modifié ! */
	float:left; /* Ajouté ! */
    padding: 7px 15px 0 15px; /* Modifié ! */
    font-size: 1.1em;
    text-decoration: none;
    color: white;
    text-align: center;
    font-weight: bold;
    font-family: Cambria;
    border-right: 1px solid #666666; /* Modifié ! */
}

Et enlève : class="menu_long" (devenu inutile)

Ps : dans ton code, mainMenu.css est appelé 2 fois.
A corriger, donc.

23/10/2012, 22h37
chloeb

ça marche niquel!! merci beaucoup!