Menu, css, liste à puce

Fermé
mike - 4 mars 2011 à 07:57
 mike - 4 mars 2011 à 15:23
Bonjour,

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.Un fond 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;
}



mais aucune différence..

Qui pourrait me donner la voie à suivre ?

merci de votre aide :)

3 réponses

Wolfinger Messages postés 13 Date d'inscription mercredi 21 juillet 2010 Statut Membre Dernière intervention 15 août 2011
4 mars 2011 à 08:10
Peut-être qu'il serait plus simple pour toi de crée une class pour chaque lien ?
C'est peut-etre pas une bonne méthode, mais peut-etre quel marchera ;)

tu garde ton css "nav_bar", tu lui mets les propriétés qui seront commune a tous les liens !
ensuite, tu crée une nouvelle class pour chaqun des liens, juste pour le survol par exemple, ce qui donnerais quelques chose comme ça :

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


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;
}

.lien1 a:hover {
background-image: url(LIEN DE L'IMAGE);
}

.lien2 a:hover {
background-image: url(LIEN DE L'IMAGE);
}

.lien3 a:hover {
background-image: url(LIEN DE L'IMAGE);
}

.lien4 a:hover {
background-image: url(LIEN DE L'IMAGE);
}

.lien5 a:hover {
background-image: url(LIEN DE L'IMAGE);
}

.lien6 a:hover {
background-image: url(LIEN DE L'IMAGE);
}


Voila ^^'
Peut-etre qu'il y as plus simple, et plus "correct" en terme de codage, mais bon tant que ça marche ;)
Essaye tu n'a rien a perdre :)

Amicalement.
0
Je ne sais pas où est passé ta réponse Wolfinger mais merci pour ton aide. Par contre, même en déclarant une classe pour chaque lien, le style reste celui déclaré en #nav_bar. quelque chose m'échappe :/
0
up...
0