Menu css en multicouleurs

Bjr

Beaucoup de tuts ici et la et surtout dans le bouquin de référence de MR Goetter et c'est super. Par contre, ce que je cherche à réaliser... je ne l'ai pas trouvé.

Donc c'est un menu plusieurs rubriques avec une couleur de texte et de fond différent pour chaque rubrique.

Comment peut-on faire cela svp ?

Merci

Salut

a priori associer à chaque rubriques un identifiant ou une classe différent(e) et coloriser en fonction.

si tes div ont déjà des ID pour le menu eh bien rien empeche de mettre un class en surplus.
j'ai lu qu'on pouvait associer à un élément plusieurs classes a condition de les séparer d'un espace. c pas une pratique conseillé non plus.

pascal
Modifié par CPascal (08 May 2007 - 10:09)

Donc alors il faudrai que je fasse autant de div que de rubriques... et le tout dans un div menu général ? c bien ca ?

Note en passant : merci à tous deux d'essayer autant que possible d'écrire les mots en toutes lettres. On n'écrit pas « c » mais « c'est ». C'est toujours plus pratique pour la lecture, non seulement la lecture visuelle mais aussi la lecture avec un lecteur d'écran (je vous laisse imaginer ce que peut donner une synthèse vocale sur certaines raccourcis d'écriture...).

CPascal a écrit :
j'ai lu qu'on pouvait associer à un élément plusieurs classes a condition de les séparer d'un espace. c pas une pratique conseillé non plus.

C'est une pratique tout à fait utilisable et absolument pas déconseillée.
On peut donc écrire, si ça nous chante :

<élément class="classe1 classe2 classe3 classe4">...</élément>

La seule restriction, c'est qu'Internet Explorer (le 6 et peut-être le 7) ne comprend pas le sélecteur de classes multiples. Le sélecteur suivant ne passera donc pas avec Internet Explorer :

élément.classe1.classe2 {...}

Par contre on pourra faire, séparément :

élément.classe1 {...}
élément.classe2 {...}

Mais pas moyen d'appliquer un style si et seulement si l'élément porte les deux classes voulues.

------------------------------------------

Pour revenir au problème posé, il suffira de faire quelque chose comme ça :

<ul id="navigation">
	<li class="nav1"><a href="...">Rubrique 1</a></li>
	<li class="nav2"><a href="...">Rubrique 2</a></li>
	<li class="nav3"><a href="...">Rubrique 3</a></li>
	<li class="nav4"><a href="...">Rubrique 4</a></li>
</ul>

À noter qu'on aurait pu aussi bien utiliser des identifiants (attribut HTML id), vu que chaque nom ("nav1", "nav2", "nav3", etc.) est unique. Personnellement, j'ai tendance à garder les identifiants pour les principaux conteneurs et pour quelques éléments remarquables, mais ça n'est en rien une obligation.
Modifié par Florent V. (08 May 2007 - 11:52)

Excuse moi, tu écris :
élément.classe1 {...
puis dans le html (si je comprends bien) :
<ul id="navigation">
<li class="nav1"><a href="...">Rubrique 1</a></li> ...


Est-ce que "élément" et "navigation" ne devraient pas être un seul et même mot histoire de ne pas s'embrouiller.. parceque la moi je le suis un peu. J'ai du mal à voir ce qui sera écris dans le CSS et sera retrouvé dans le html

Je suis pas super costaud en css
Merci

milsou2 a écrit :
J'ai du mal à voir ce qui sera écris dans le CSS et sera retrouvé dans le html

En gros, quelque chose comme ceci:

[#black][b]HTML[/b][/#]

<ul id="navigation">

	<li class="nav1"><a href="...">Rubrique 1</a></li>

	<li class="nav2"><a href="...">Rubrique 2</a></li>

	<li class="nav3"><a href="...">Rubrique 3</a></li>

	<li class="nav4"><a href="...">Rubrique 4</a></li>

</ul>


[#black][b]CSS[/b][/#]

li.nav1 {color:red;}

li.nav2 {color:green;}

Mon exemple avec élément.classe1 {...} est fictif. Il n'existe pas en HTML d'élément nommé « élément ».

element ne correspond pas à un identifiant ici mais plutot a un nom de balise. ul ou li auquel on applique la classe.


@florent je vais essayer.. c'est dur de se défaire d'une mauvaise habitude. et déjà que je réédite bien 2 ou 3 fois mes textes pour faire la chasse a un nombre ( bien trop ) élevé de fautes que je parséme de ci de là.

pascal C. ( et donc C'est Pascal )

CPascal a écrit :
element ne correspond pas à un identifiant ici mais plutot a un nom de balise.

Non non, ça correspond à un nom d'élément HTML.

Pour mettre les choses au clair : p (ou P) est un élément HTML qui est marqué par une balise ouvrante <p> et une balise fermante </p>.

Ok ... je crois que Benjamin à été claire