comment on fait pour avoir les petites barres en haut du menu (résolu)

Kristen

Bonjour
Voilà, toute ma question dans le titre. Je ne sais pas comment on fait pour avoir cette petite barre de couleurs différentes qui s'affiche au-dessus du menu de ce site.
Vous pouvez m'aider?
Merci.

ti_pierre

C'est du CSS, chaque lien possède une "class" dans la structure HTML du thème et ainsi j'ai attribué une couleur différente à chacun

Jos

J'ai espionné le code source


<ul class="menu_left">
<li class="home"><a href="http://www.pluxml.org/">Accueil</a></li>;
<li class="wiki"><a href="http://wiki.pluxml.org/">Wiki</a></li>;
<li class="ressource"><a href="http://ressources.pluxml.org/">Ressources</a></li>;
<li class="forum"><a href="http://forum.pluxml.org/">Forums</a></li>;
<li class="blog"><a href="http://www.pluxml.org/blog">Blog</a></li>;
</ul>


Chaque lien a une class. Il suffit dans ton css de spécifier ce que tu veux pour chaque class comme par exemple sa couleur.


.home {color: #000;}
.wiki {color: #0099ff;}


Et ainsi de suite...

Kristen

Je ne suis pas près fort/doué et je ne comprends pas trop.
En faisant ça, c'est pas le menu Accueil Wiki etc qui prend la couleur précisée en .home, .wiki etc?

Jos

L'exemple cité concerne le portail PluXML. En gros, chaque lien a une classe css qui lui est propre, et sur cette classe on lui attribue un peu ce que l'on veut (en css).

Jerry Wham

C'est pas ça plutôt :

.home a:hover {color: #000;}
.wiki a:hover {color: #0099ff;}

Frédéric

nop ça :

[== CSS ==]
body#wiki #menu .menu_right li:hover {
	border-top: 1px solid #89A054;
}
body#wiki #menu .menu_right li a:first-letter {
	color: #89A054;
}

Jos

Jerry Wham a écrit:

C'est pas ça plutôt :

.home a:hover {color: #000;}
.wiki a:hover {color: #0099ff;}

Ah oui en effet, tu as raison. Moi c'était la couleur du texte dans mon exemple.

Kristen

Bon, je comprends vraiment pas désolé

.home a:hover {color: #000;}

ça donne la couleur noir lorsqu'on passe la souris sur la case home. Ça je crois que j'ai bon? Alors pourquoi, toutes les cases accueil, wiki et autres sont-elles toujours en noir et seule une petite bande eau-dessus est de la couleur spécifiée?

Frédéric

Tu n'as pas regardé le code que j'ai mis plus haut.

body#wiki #menu .menu_right li:hover {
	border-top: 1px solid #89A054;
}

Permet d'ajouter la bordure au survol comme tu souhaite.

body#wiki #menu .menu_right li a:first-letter {
	color: #89A054;
}

Ajoute uniquement sur la première lettre la couleur désiré a son menu.
Le code que tu met avant donne une couleur suivant les bordure sur l'ensemble des liens de la page en question.
A adapté avec la couleur souhaitée...

Kristen

oups, effectivement je t'ai zappé désolé

Jos

Si c'est pour un site que tu as en ligne, tu pourrai nous communiquer son adresse pour voir si ce qu'on a écris est valable.

Kristen

@ Frédéric
c'est exactement ça merci.

@ Jos
c'est plus pour info/test à mettre en place si ça me convient.

Jos

Tu as raison