18041 sujets

Questions générales et questions de débutants

Onglets multicolors

Bonjour,
Je cherche à donner une couleur différente à chaque onglet survolé (hover).
Par exemple accueil > jaune, notre métier > vert, nos références bleu etc...
car toutes les pages de mon site auront une couleur de référence qui correspondra à la couleur de l'onglet qui y mène.
Avec hover tous les survols se retrouve de la même couleur. j'ai essayé genre des hover1 hover2 etc...
Impossible de trouver la solution en css. faut-il obligatoirement ajouter du javascript ? Merci de votre aide. Philippe

voici mon css :

#nav { color: #fff; font-size: 100%; font-family: "Trebuchet MS", Verdana, Sans-Serif; font-weight: bold; background-image: url("../img/bodyFooter.jpg"); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-transform: uppercase; margin: 0; padding: 10px 0; width: 100%; float: left }
#nav li { font-size: 1em; font-weight: bold; list-style: none; display: inline; padding: 5px 2px 5px 20px }
#nav li a { color: #fff; font-weight: bold; text-decoration: none; margin: 0; padding: 7px }
#nav li a:hover { color: #fc0; font-weight: bold; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0 }
#nav #current a { color: #fc0; font-weight: bold; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0 }

et voici mon html :

<ul id="nav">
<li id="current"><a id="Home page" href="index.html">Accueil</a></li>
<li><a id="jaune" href="metier.html">Notre métier</a></li>
<li><a id="Clients" href="#">Nos références</a></li>
<li><a id="red" href="#">L'équipe</a></li>
<li><a id="France, Italie, Allemangne..." href="#">International</a></li>
<li><a id="Quoi de neuf ?" href="#">News</a></li>
</ul>
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Salut,
Déjà, il faut donner aux ID un texte sans caractère spécial et sans espace qui décrit la fonction/valeur de l'objet et non son apparence.

Pour ce qui est des couleurs différentes, bah tu donne des IDs différents. Un exemple vaut mieux qu'un long discour :
<ul>
	<li><a id="accueil" href="#">Accueil</a></li>
	<li><a id="pas_accueil" href="#">Pas accueil</a></li>
	<li><a id="explication_accueil" href="#">Explication de l'accueil</a></li>
</ul>

#accueil:hover {
	background-color: #f00;
}

#pas_accueil:hover {
	background-color: #0f0;
}

#explication_accueil:hover {
	background-color: #00f;
}
bon voici mon message revu et corrigé par le modérateur (que je remercie) et merci à Whisno, je vais essayer ce qu'il me préconise. par contre à première vue, je me suis surement mal expliqué, mais j'aimerais que la couleur du texte change quand on survole l'onglet. Je suis un peu lent, après essai à mon avis vers lundi, je reviens vers vous.
Philippe

Bonjour,
Je cherche à donner une couleur différente à chaque onglet survolé (hover).
Par exemple accueil > jaune, notre métier > vert, nos références bleu etc...
car toutes les pages de mon site auront une couleur de référence qui correspondra à la couleur de l'onglet qui y mène.
Avec hover tous les survols se retrouvent de la même couleur. j'ai essayé genre des hover1 hover2 etc...
Impossible de trouver la solution en css. faut-il obligatoirement ajouter du javascript ? Merci de votre aide. Philippe

voici mon css :



#nav { color: #fff; font-size: 100%; font-family: "Trebuchet MS", Verdana, Sans-Serif; font-weight: bold; background-image: url("../img/bodyFooter.jpg"); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-transform: uppercase; margin: 0; padding: 10px 0; width: 100%; float: left }
#nav li { font-size: 1em; font-weight: bold; list-style: none; display: inline; padding: 5px 2px 5px 20px }
#nav li a { color: #fff; font-weight: bold; text-decoration: none; margin: 0; padding: 7px }
#nav li a:hover { color: #fc0; font-weight: bold; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0 }
#nav #current a { color: #fc0; font-weight: bold; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0 }

et voici mon html :

<ul id="nav">
<li id="current"><a id="Home page" href="index.html">Accueil</a></li>
<li><a id="jaune" href="metier.html">Notre métier</a></li>
<li><a id="Clients" href="#">Nos références</a></li>
<li><a id="red" href="#">L'équipe</a></li>
<li><a id="France, Italie, Allemangne..." href="#">International</a></li>
<li><a id="Quoi de neuf ?" href="#">News</a></li>
</ul>
Sujet clos
Aller à