Menu Horizontal CSS, différents styles sur le même menu...

Bonjour à tous, voilà mon problème :

J'ai un menu horizontal en html/css et j'aimerais que les 3 groupes de liens qui s'y trouvent aient des couleurs différentes.

Pour cela, il faut donc faire 3 styles différents, mais j'aimerais les faire rentrer sur la même feuille de style.

Voilà mon code HTML :

<div id="underlinemenu">

<ul>
  <li><a href="index1.html"><strong>Accueil</strong></a></li>

<span class="premiere">
  <li><a href="francais.html"><strong>Français</strong></a></li>

  <li><a href="svt.html"><strong>S.V.T</strong></a></li></span>

<span class="terminale">
  <li><a href="ses.html"><strong>S.E.S</strong></a></li>

  <li><a href="maths.html"><strong>Maths</strong></a></li>

  <li><a href="histoire.html"><strong>Histoire</strong></a></li>

  <li><a href="geo.html"><strong>Géographie</strong></a></li></span>

<span class="langues">
  <li><a href="anglais.html"><strong>Anglais</strong></a></li>

  <li><a href="espagnol.html"><strong>Espagnol</strong></a></li>

  <li><a href="options.html"><strong>Options</strong></a></li></span>
</ul>

</div>

Et mon css :

#underlinemenu{
margin: 0;
padding: 0;
}

#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
}

#underlinemenu ul li{
display: inline;
}

#underlinemenu ul li a{
float: left;
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
}

#underlinemenu ul li a:hover{
color: red;
background-color: #F3F3F3;
border-bottom: 4px solid red;
padding-bottom: 0;
}

Comment puis-je faire ??

Salut,
Tout d'abord, la balise li est de type bloc donc mettre un span n'est pas adapté.

Comme tu as déjà appliqué les styles de mise en page (padding ect...) il suffit juste d'appliquer les couleurs avec la propriété background.

<div id="underlinemenu">



<ul>

  <li><a href="index1.html"><strong>Accueil</strong></a></li>



<div class="premiere">

  <li><a href="francais.html"><strong>Français</strong></a></li>



  <li><a href="svt.html"><strong>S.V.T</strong></a></li></div>



<div class="terminale">

  <li><a href="ses.html"><strong>S.E.S</strong></a></li>



  <li><a href="maths.html"><strong>Maths</strong></a></li>



  <li><a href="histoire.html"><strong>Histoire</strong></a></li>



  <li><a href="geo.html"><strong>Géographie</strong></a></li></div>



<div class="langues">

  <li><a href="anglais.html"><strong>Anglais</strong></a></li>



  <li><a href="espagnol.html"><strong>Espagnol</strong></a></li>



  <li><a href="options.html"><strong>Options</strong></a></li></div>

</ul>

</div>

.langues li a:hover { background: skyblue;} 
.premières li a:hover  { background: red;} 
.terminal li  a:hover { background: orange;} 

Reste à vérifier si ça marche

ça change rien^^

Dans tous les cas, corrige et VALIDE ton code HTML.
http://validator.w3.org

Il n'y a pas de problème, mon code est valide et conforme xHTML 1.0 Transitional.

Faire 3 feuilles de style serait-il une solution ??

Faire trois feuilles de styles n'est surement pas une solution. Mais pourquoi ne pas tenter trois listes en une

Si je reprends la base de ton code, ça donnerait ça :

<div id="underlinemenu">
<ul>
<li><a href="index1.html"><strong>Accueil</strong></a></li>
<li class="premiere"><ul>

 <li><a href="francais.html"><strong>Français</strong></a></li>
 <li><a href="svt.html"><strong>S.V.T</strong></a></li></div>

</ul></li>

<li class="terminale"><ul>

<li><a href="ses.html"><strong>S.E.S</strong></a></li>
 <li><a href="maths.html"><strong>Maths</strong></a></li>
 <li><a href="histoire.html"><strong>Histoire</strong></a></li>

</ul></li>


<li class="langues"><ul>

<li><a href="anglais.html"><strong>Anglais</strong></a></li>
<li><a href="espagnol.html"><strong>Espagnol</strong></a></li>
 <li><a href="options.html"><strong>Options</strong></a></li>

</ul></li>

</ul> 

</div>

Après pour le css, tu tentes d'appliquer un style de mise en page pour la liste parant et un style couleur aux listes enfants (si tu vois ce que je veux dire)

Tout de même, je suis assez sûr qu'il doit y avoir une solution plus simple, avoir avec une personne connaissant mieux que moi le css (tout le monde quoi )

Parfait ça marche^^

Il faut que je bidouille ça pour bien comprendre mais c'est ce que je voulais, merci beaucoup de ton aide !!

Yes j'ai réussi à aider quelqu'un \o/

De rien, ça m'a fait plaisir ^^

Arthur69 a écrit :
Il n'y a pas de problème, mon code est valide et conforme xHTML 1.0 Transitional.

Le code HTML que tu citais dans ton premier message (donc en ouverture de ce sujet) ne l'était pas.

Ah oui, et pour une solution quand même plus élégante (surtout s'il ne s'agit que de changer des couleurs de liens): ne pas utiliser de listes imbriquées inutiles, mais exploiter simplement des classes:

<ul id="menu">
	<li class="groupe1">...</li>
	<li class="groupe1">...</li>
	<li class="groupe1">...</li>
	<li class="groupe2">...</li>
	<li class="groupe2">...</li>
	<li class="groupe2">...</li>
	<li class="groupe2">...</li>
	<li class="groupe3">...</li>
	<li class="groupe3">...</li>
</ul>

On remarquera en passant qu'on n'a pas forcément besoin d'un DIV conteneur, le UL faisant déjà office de conteneur.

Non, il ne s'agit pas de changer uniquement de couleurs, mais de souligner par un border-bottom...

Ce que je veux : les liens sont tous gris sur fond blanc au repos et en a:hover, (tous avec fond gris clair)

- le groupe première devient rouge et border-bottom de 3px red
- le groupe terminale devient orange et border-bottom de 3px orange
- le groupe langues devient bleu et border-bottom de 3px bleu.

Le problème, c'est que seul le groupe première est bon, les autres apparaissent en liste verticale, mais avec les bonnes couleurs.


J'y comprend rien, c'est une vrai jungle ce css...

En bidouillant j'ai finalement réussi, voici le résultat : http://cours.bac.es.free.fr/index1.html


Merci à Kadus qui m'a donné me bon truc, et à Florent, qui aide tellement sur ce forum, qu'il en devient indispensable !!