Menu CSS avec couleurs différentes

deschabestra -  
 jyan -
Bonjour,
J'ai réalisé un menu tout en CSS.
Les cases changent de couleur au survol et lorsque l'on est sur la page correspondante à une case elle change aussi de couleur.
J'aimerais maintenant pouvoir donner une couleur différente pour chaque case de mon menu.

J'ai vu des scripts en Java Script mais je préférai tout faire en CSS. Visiblement ça à l'air possible avec des class (exemple sur https://www.lequipe.fr/ mais je ne gère pas trop ...Ou peut être faut il que je fasse un menu avec des images ?

En bref une petite aide me serait fort utile, merci d'avance

Code css :
#menu {
list-style: none ;
margin: 0 ;
padding: 0 ;
text-align: center ;
}

#menu li {
display: inline ;
background:#CCCCCC ;
color:#FFFFFF ;
margin-right: 1px ;
}

#menu li a {
padding: 4px 20px ;
background:#CCCCCC;
color: #fff ;
font: 1.2em Arial, Helvetica, sans-serif;
line-height: 1.2em ;
text-align: center ;
text-decoration: none ;
}

#menu #selected a {
background: #333333 ;
text-decoration: none ;
}

#menu li a:hover {
background: #333333 ;
text-decoration: none ;
}

CODE HTML :
<div id="conteneur">
<h1 id="bandeau"></h1>
<ul id="menu">
<li id="selected"><a href="index.html">Accueil</a></li>
<li><a href="empreintes.html">Les empreintes numériques</a></li>

<li><a href="technologies.html">Les technologies utlisées</a></li>
<li><a href="offre.html">Notre offre</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
A voir également:

3 réponses

Réponse 1 / 3
GNRhic Messages postés 392 Date d'inscription   Statut Membre Dernière intervention   89
 
Tu peux le faire avec des images, mais aussi en CSS, mais ce n'est pas très pratique.

En effet, dans ton HTML, il faudra que tu mette a chaque case de couleur un "class="rouge" (par exemple pour une case rouge), et dans ton CSS tu met :

.rouge
{
ton code CSS
ton code CSS
}

Tu met un point devant car c'est un Class, (au lieu du diese, quand c'est un ID).
0
deschabestra
 
Je te remercie pour ta réponse très rapide ;).
Je suis désolé mais je ne vois pas trop comment appliquer ton conseil car je suis vraiment débutante..

Si j'ai bien compris dans le css il faut que je créer une classe pour chaque case en définissant la couleur mais je ne vois pas à quel endroit les mettre dans ma feuille de style et comment les relier au menu ? Pourrais tu me donner un exemple plus précis en lien avec mon code ?

Ensuite, dans le code HTML pour appeler la classe je fais comment ?

Merci pour ton aide
0
je_veux_savoir > deschabestra
 
bonjour, pour avoir un menu dont la couleur change au passage de la souris:
cela se avec les pseudo-format: a:hover (souris au dessus)

code xhtml

<div id="menu" >
<ol><li class="couleur1"> element1</li>
<li class="couleur2"> element2</li>
</ol>
</div>

code css

couleur.a:hover
{
background-color: "la couleur_que_tu_veux_quand_la_souris_sera_au_dessus_de_cet_element;
}

courage, je sais pas si j'ai bien codé mais ca marche avec a:hover
0
deschabestra > je_veux_savoir
 
Hello !

Bon la technique des classes marche impec j'ai enfin mon menu avec différentes couleurs au roll over.;) J'ai utilisé ce code :

CODE CSS
#menu li.orange a:hover
{
background-color:#FF6600;
text-decoration: none ;
}

CODE HTML :
<li class="rouge"><a href="offre.html">Notre offre</a></li>
<li class="gris"><a href="faq.html">FAQ</a></li>

Maintenant mon problème est de pouvoir faire la même que pour le roll over mais lorsque les cases ont été cliquées et que l'on est sur la page correspondante. Par contre je ne connais pas de propriété de lien comme a:hover .....
Auparavant j'utilisais la propriété selected mais comme id ...

CODE SSS
#menu #selected a {
background: #333333 ;
text-decoration: none ;
}

J'aimerais pouvoir utiliser la propriété selected dans une classe mais je ne sais pas comment faire ,???

Merci pour votre soutient ;)
0
je_veux_savoir > deschabestra
 
a:focus pour l'apparence du lien sélectionné (Internet Explorer ne l'interprète pas). Donc, il faut l'accoupler à a:visited pour lien déjà visité

a: active: pour l'apparence du lien au moment du clic

Courage et si tu veux tu peux m'écrire directement à ma boite si t'as d'autres questions. Tu peux aussi télécharger les cours de SELFHTML. Cherche et bonne chance; c'est kapokape@yahoo.fr
0
deschabestra > je_veux_savoir
 
Merci pour l'info ! Du coup j'ai simplifié mes envies et j'ai laissé les menus correspondant à la rubrique dans laquelle l'utilisateur se trouve, d'une seule couleur. Par contre j'ai fais un roll over de plusieurs couleurs! Ce n'est pas l'idée de départ mais cela me conviens bien ;). Merci pour ton aide !
0
Réponse 2 / 3
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
salut,

Par contre je ne connais pas de propriété de lien comme a:hover .....
Auparavant j'utilisais la propriété selected mais comme id ...
et c'est la bonne technique !

le menu sélectionné genre : 
<li id="selected"><a href="…">blabla</a></li>

et ta CSS : 
li#selected a{
color:red;
}
0
Réponse 3 / 3
billy le retour
 
J'aimerais savoir comment on fait pour le code de debut de lettre ?
Oui exemple


salut je chercher
un pokemon

Pour que la premiere lettre soit dune couleur differente ^^
0
Zaki_N. Messages postés 107 Date d'inscription   Statut Membre Dernière intervention   49
 
Bonjour,

Tu peux mettre, par exemple, dans ton CSS : 
.Lettrine_couleur   
{   
 font-weight : bold;   
 color : rgb(255, 0, 0);   
}


Et dans ta page : 
<p><span class=Lettrine_couleur>S</span>alut je chercher<br />   
un pokemon</p>
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
dual channel : 2 paires de ram de capacité différente
damdam -
damdam -

6 réponses
Retrouver réglages couleurs d'origine de mon écran W10
LoulouSophie -
pistouri -

8 réponses
rétablir les couleurs d'origine
motobroc -
Utilisateur anonyme -

1 réponse
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses