Discussion :

[chloeb]

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

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

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

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 !

[NoSmoking]

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

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

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

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

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

[Invité]

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

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

[chloeb]

ça marche niquel!! merci beaucoup!