[Résolu] Menu, css, liste à puce et images

Bonjour à tous,

Je suis entrain de modifier un menu existant qui a pour forme :

<ul id="nav_bar">
<li><a href="index.php">Accueil</a></li>
<li><a href="index.php?a=1">Vente</a></li>
<li><a href="index.php?a=19">Recherche</a></li>
<li><a href="index.php?a=28&b=135">Fonctionnalités</a></li>
<li><a href="index.php?a=28&b=143">Tarifs</a></li>
<li><a href="index.php?a=28&b=141">Aide</a></li>
</ul>

et a comme css :

#nav_bar li a:link,
#nav_bar li a:visited {
background: #eaeaea;
border-top: 1px solid #d4d4d4;
border-left: 1px solid #d4d4d4;
border-right: 1px solid #d4d4d4;
border-bottom: none;
padding: 8px 15px;
color: #818181;
text-decoration: none;
display: block;
float: left;
position: relative;
top: 0px;
margin: 0px 1px;
}

Sur ce menu, j'aimerais que chaque lien ai un style différent car je veux en faire un menu avec des images en fond de chaque boutons et que ces fond soient sensitif au passage de la souris..
J'ai donc pensé que je devais ajouter un "id" à chaque liens comme ceci
<div id="nav">
<ul id="nav_bar">
<li><a href="index.php" id="homelink">Accueil</a></li>
<li><a href="index.php?a=1" id="selllink">Vente</a></li>
<li><a href="index.php?a=19" id="searchlink">Recherche</a></li>
<li><a href="index.php?a=28&b=135" id="featureslink">Fonctionnalités</a></li>
<li><a href="index.php?a=28&b=143" id="pricelink">Tarifs</a></li>
<li><a href="index.php?a=28&b=141" id="helplink">Aide</a></li>
</ul>
Mais j'ai beau déclarer dans mon stylesheet..
#homelink {
background: #000000;
}
aucune différence..

on m'a aussi conseillé de mettre une classe à la place de l'id, mais pas plus d'effet..

Je passe à coté de quelque chose mais quoi ? ^^

Qui pourrait me donner la voie à suivre ?
merci de votre aide
Modifié par esk57 (05 Mar 2011 - 19:06)

bonjour,

c'est une histoire de "poids des selecteurs".

#nav_bar li a:link

est plus lourd (fort) que

#homelink

pour retablir un equilibre et ecrasé la premiere regle on peut réecrire la nouvelle régle comme ceci:

#nav_bar li a#homelink:link

merci beaucoup gc-nomade ^^ c'était bien ça

Simple remarque: les sélecteurs concis, c'est bien.
Donc plutôt que:

#nav_bar li a:link {}
#nav_bar li a#homelink:link {}

j'écrirais:

#nav_bar a {}
#nav_bar #homelink {}