Couleur de l'onglet du menu ?
Résolu
Bonjour,
Je suis en train de créer un site et je configure mon menu horizontal.
J'ai mis une balise a:hover pour que l'onglet change de couleur lors du passage de la souris mais je voudrais que le texte de l'onglet conserve cette couleur lorsque l'on est sur la page. J'ai essayé avec a:visited mais tous les onglets changent de couleur... Quelle balise utilisée ?
Merci
Je suis en train de créer un site et je configure mon menu horizontal.
J'ai mis une balise a:hover pour que l'onglet change de couleur lors du passage de la souris mais je voudrais que le texte de l'onglet conserve cette couleur lorsque l'on est sur la page. J'ai essayé avec a:visited mais tous les onglets changent de couleur... Quelle balise utilisée ?
Merci
12 réponses
-
le a:visited ne va pas te servir dans ce cas, et il n'y a pas de balise spécifique.
Il faut ruser autrement.
Vas voir là : https://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html
<blockquote cite="Shakespeare">To be or not to be ; That is the question...</blockquote> -
ContributeurUne balise a:hover ? c'est une pseudo-classe de CSS .. et non une balise.
Peux-tu poster ton bout de code ? -
Bonjour,
Lea:visited
permet de modifier le lien une fois visité.
Il n'existe à ma connaissance pas de balise pour faire ce que tu demande.
Pour garder la couleur du lien au survol, le plus simple est de mettre sur chaque page una{color:nom_de_la_couleur;}dans le lien correspondant à la page actuelle. -
ContributeurOui, je rejoins plutôt l'idée de basy64, c'est ce que j'avais aussi pensé.
pour tes liens,
Tu mets :
a {color:TA COULEUR;} a:hover {color:LA MEME COULEUR;}
Cordialement
-
Merci pour vos réponses mais je n'y arrive toujours pas.
J'ai regardé sur alscréation, ça a l'air d'être, mais non !!!
Voici un bout de mon code
#menu {
background-color: #CCCCCC;
height: 60px;
width: 960px;
}
#menu ul {
display: inline;
list-style-type: none;
}
#menu li{
display: inline;
}
#menu li a{
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
display: block;
clear: none;
float: left;
height: 55px;
padding-top: 5px;
background-color: #CCCCCC;
width: 160px;
}
#menu li a:hover{
background-color: #CCCCCC;
color: #00FF00;
}-
ça a l'air d'être, mais non
?? manque pas un mot là ? ;)
J'ai besoin d'une précision : la couleur de ton onglet, tu veux qu'elle ne reste que lorsqu'on est sur la page en cours ou qu'elle reste aussi lorsqu'on va sur une autre page ?
Car si c'est la 1ère solution, le tuto d'alsa est ce qu'il faut.
Sinon, tu mets des class en définissant des couleurs spécifiques pour chaque onglet, mais ces couleurs resteront tant que le cache n'aura pas été vidé !
Exemple :<ul> <li class="item1"><a href="">Item 1</a></li> <li class="item2"><a href="">Item 2</a></li> </ul> li.item1 a:visited, li.item1 a:hover { color:red; } li.item2 a:visited, li.item2 a:hover { color:green; } -
Oui j'ai oublié le mot : "simple"...
C'est la 1ère solution, je veux les onglets blancs de façon permanente et verts lorsque l'on passe dessus avec la souris et lorsque la page est en cours
Je vais regarder à nouveau le tuto d'alsa mais j'ai essayé et cela n'a pas fonctionné, j'ai dû oublier un truc.
Merci -
-
Voici les codes html et css que j'ai essayés, mais cela ne fonctionne toujours pas
<div id="menu">
<ul>
<li><a href="accueil.html">ACCUEIL</a></li>
<li><a href="artistes.html">ARTISTES</a></li>
<li><a href="galerie.html">GALERIE</a></li>
<li><a href="actualité.html">ACTUALITE</a></li>
<li><a href="actualité.html">EXPOSITIONS</a></li>
<li><a href="contact.html" class="en-cours">CONTACT</a></li>
</ul>
</div>
#menu #en-cours a{
color: #00FF00;
} -
-
-
ContributeurNormal,
La coleur de ta police dans
menu li a et menu li a:hover n'est pas la même .. -
c'est parce que je veux une police blanche "en général" et verte lorsque je passe la souris dessus et lorsque je suis sur la page
-
ContributeurEt où est le problème ?
-
le problème c'est que je veux que la police de mon onglet soit verte pour savoir sur quel lien on se trouve.
car là, la couleur est (blanche) identique partout
Merci de te me répondre si rapidement -
ContributeurEssaye d'enlever les 'li' dans ton CSS.
-
Il faudrait que tu rajoute une classe pour le lien de la page actuelle
#menu li a .actu{ color: #00FF00; }
Avec dans ton html
<a href="lien.html" class="actu">Page actuelle</a>
-
Merci,
Je vais essayer ça
