Classes CSS pour menu de navigation [Fermé]

Signaler
Messages postés
1
Date d'inscription
mardi 19 avril 2011
Statut
Membre
Dernière intervention
19 avril 2011
-
siniko44
Messages postés
172
Date d'inscription
vendredi 30 juillet 2010
Statut
Membre
Dernière intervention
29 novembre 2013
-
Bonjour,

Sur mon site web, j'ai le menu de navigation suivant :

<div id="navigationbar">
<ul id="navlist">
<li class="active"><a href="home-fr.html">Accueil</a></li>
<li class="inactive"><a href="services-fr.html">Traduction</a></li>
<li class="inactive"><a href="copywriting-fr.html">Copywriting</a></li>
<li class="inactive"><a href="aboutus-fr.html">A propos</a></li>
<li class="inactive"><a href="contact-fr.html">Contact</a></li>
</ul>
</div>

Avec les propriétés CSS suivantes pour le comportement des boutons :

.active a{font-size: 1em; background-color:#333333; color:#ffffff; text-decoration: none;}
.active a:hover {font-size: 1em; background-color: #333333; color: #ffffff; text-decoration: none;}
.inactive a:link {font-size: 1em; background-color:#666666; color:#FFFFFF; text-decoration: none;}
.inactive a:visited {font-size: 1em; background-color: #666666; color:#FFFFFF; text-decoration: none;}
.inactive a:hover {font-size: 1em; background-color: #999999; #ffffff; text-decoration: none;}

J'aimerais donner une couleur différente à chaque bouton, rendre le bouton correspondant actif sur la page concernée et avoir une couleur en HOVER qui s'apparente à celle du bouton (je ne peux donc pas spécifier une même couleur pour tous les boutons en HOVER).

Quelqu'un peut me dire comment faire en utilisant les classes/sous-classes ? Merci beaucoup!

1 réponse

Messages postés
172
Date d'inscription
vendredi 30 juillet 2010
Statut
Membre
Dernière intervention
29 novembre 2013
14
C'est chiant et long, mais je crois bien que c'est la seule méthode, voici le code :

<code>
<div id="navigationbar">
<ul id="navlist">
<li class="active"><a id="coul_1" href="home-fr.html">Accueil</a></li>
<li class="inactive"><a id="coul_2" href="services-fr.html">Traduction</a></li>
<li class="inactive"><a id="coul_3" href="copywriting-fr.html">Copywriting</a></li>
<li class="inactive"><a id="coul_4" href="aboutus-fr.html">A propos</a></li>
<li class="inactive"><a id="coul_5" href="contact-fr.html">Contact</a></li>
</ul>
</div>

a#coul_1{font-size: 1em; background-color:#couleur1; color:#ffffff; text-decoration: none;}
a#coul_1:hover {font-size: 1em; background-color:#couleur1H; color: #ffffff; text-decoration: none;}
a#coul_2{font-size: 1em; background-color:#couleur2; color:#ffffff; text-decoration: none;}
a#coul_2:hover {font-size: 1em; background-color:#couleur2H; color: #ffffff; text-decoration: none;}

Et ainsi de suite...