[Résolu]Menus simples en CSS, couleurs

Bonjour,

J'ai suivis les divers tuto pour les menus et j'ai finalement choisi d'incorporer un menu horizontal. Tout ce passe bien avec le code donné, je change aisément les tailles, les couleurs..etc pour l'adapter a mon site et là je me dit: "Mais pourquoi ne pas mettre une couleur différente pour chaque bouton quand la personne "passe dessus" avec sa souris".

En gros je voudrai que tous mes boutons aient la meme couleur(blanc) et quand on les survole ils aient tous une couleur différente(bleu,vert,rouge,...) ...mais la probleme! je ne sais pas le faire..
Etant vraiment novice je solicite donc votre aide.

Merci.
Modifié par -Bam- (31 Jan 2007 - 22:20)

bonjour et bievenu à toi.

Le fonctionnement d'un lien est assez simple. Il comporte 4 états même si en règle générale, on n'en utilise que 3. Il s'agit :
- du comportement normal (link)
- du comportement au survol (hover)
- du comportement lorsque le lien a été visité (visited)

Après, il ne te reste qu'à déclarer les propriétés :

a:link {
color:blue; 
}

a:hover {
color:green;
}

a:visited{
color:red;
}

Il s'agit bien sûr d'un exemple simple pour te montrer le fonctionnement de la chose.
N'hésite pas à aller chercher des informations dans les tutoriels proposés ...

-Bam- a écrit :
En gros je voudrai que tous mes boutons aient la meme couleur(blanc) et quand on les survole ils aient tous une couleur différente(bleu,vert,rouge,...) ...mais la probleme! je ne sais pas le faire..

Hello et bienvenue

Tu es bien d'accord que pour adopter un comportement différent pour chaque élément, il faut... différencier chaque élément.
Cela se fait tout simplement en ajoutant une classe différente à chacun des éléments concerné.
Si le terme de "classe" ne t'évoque rien, il va te falloir vite te plonger dans les Ressources du salon CSS si tu ne l'as pas déjà fait

Cygnus a écrit :
Le fonctionnement d'un lien est assez simple. Il comporte 4 états même si en règle générale, on n'en utilise que 3. Il s'agit :
- du comportement normal (link)
- du comportement au survol (hover)
- du comportement lorsque le lien a été visité (visited)

Je ne suis pas sûr qu'il s'agit de ce genre de soucis. Je crois simplement qu'il veut avoir plusieurs couleurs pour le même état (hover).
Modifié par Raphael (31 Jan 2007 - 19:41)

Tout d'abord, merci pour vos reponces, en effet j'vais compris qu'il fallait ajouter une classe pour differencier chaque elements. D'aprés ce que j'ai compris les classes sont integrés au html pour s'en servir dans le .css, on peut ainsi formater rapidement plusieur partie du contenu en une simple manipe, ce qui evite de réécrire a chaque fois les balise pour mettre le texte en italic, souligné et en police 13 par exemple. De plus ces classes permettent de séparer le contenu du site et ca forme: le design. Mais la j'ai un peu de mal a comprendre commment rajouter une classe a mon code:

html:

<ul id="navigation">
	<li><a href="#" title="aller à la section 1">Wifi</a></li>
	<li><a href="#" title="aller à la section 2">Bluetooth</a></li>
	<li><a href="#" title="aller à la section 3">Infrarouge</a></li>

</ul>

css:

#navigation {
	margin: 0 ;
	padding: 0 ;
	list-style: none ;
	text-align: center ;
	}

#navigation li {
	display: inline ;
	margin-right: 0px ; 
	color: #fff ;
	background-color: #c00 ;
	}
	
	
#navigation li a {
	padding: 0 90px ; 
	background: white ;
	color: black ;
	border: 2px solid black ; 
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 3em ; 
	text-align: center ;
	font-weight: bold;
	text-decoration: none ;
	}
	
	
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: #ABCA70 ;
	text-decoration: none ;
	font-weight: bold;
	color : white
	}

Bonjour,

Les classes sont des attributs HTML, et doivent donc être ajoutées dans des éléments HTML. Par exemple :

[b]HTML :[/b]
<ul id="navigation">
	<li class="nav-wifi"><a href="#" title="aller à la section 1">Wifi</a></li>
	<li class="nav-blue"><a href="#" title="aller à la section 2">Bluetooth</a></li>
	<li class="nav-infra"><a href="#" title="aller à la section 3">Infrarouge</a></li>
</ul>

[b]CSS :[/b]
#navigation li.nav-wifi a:hover {color: red;}
#navigation li.nav-blue a:hover {color: orange;}
etc.

Vu que chaque élément aura un style différent, on aurait aussi bien pu utiliser des identifiants (attribut HTML id), plutôt que des classes.

Attention cependant aux variations de style... elle ne sont pas toujours du meilleurs effet, et un peu de constance ou de sobriété ne fait pas de mal.

Merci beaucoup,
ca marche parfaitement. Effectivement j'auré pu utilisé des identifiant mais je prefere garder tout le design dans le .css

Merci pour tes conseil graphique Florent, je vais essayé de garder une certaine sobriété.

Derniere chose, j'ai encore un petit probleme, il y a un petit espace (1 ou 2px) entre mes boutons, comme on peut le voir dans l'exemple du tuto:
http://css.alsacreations.com/xmedia/exemples/menunew/menu2.html
J'aimerais si possible enlevé cet espace pour qui mes bouton soit "collés", est-ce possible?

-Bam- a écrit :
http://css.alsacreations.com/xmedia/exemples/menunew/menu2.html
J'aimerais si possible enlevé cet espace pour qui mes bouton soit "collés", est-ce possible?

La page que tu cites explique la source du problème, et fait un lien vers un article relativement complet sur la question. Ça devrait t'aider.

Oula, ca va pas trés fort moi.. je donne un exemple où est marqué la solution..
Excuser moi merci pour tout.