[RESOLU] Personnalisation des <li> | une couleur par item de men

Bonjour,

J'ai monté un petit menu (le plus léger possible) dont chaque lien a sa propre couleur, c'est hyper important. La couleur est donnée par un "border-top" de 5 px.

Ce menu est superbe sous firefox mais sans aucune couleur sous IE 6...

Pouvez-vous m'aider ?

Voila l'html du menu :

<ul id="navigation">
          <li id="accueil"><a href="#">Accueil</a></li>
          <li id="spect"><a href="#">Spectacles</a></li>
          <li id="agenda"><a href="#">Agenda</a></li>
          <li id="ctc"><a href="#">Contacts</a></li>
          <li id="liens"><a href="#">Liens</a></li>
        </ul>

et voilà la CSS qui correspond :

#navigation li {
	display: inline ;
	list-style: none ;
	}
#navigation li a {
	padding: 4px 20px ;
	color: #666 ; 
	border-top: solid 5px #ccc;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	text-align: center ;
	text-decoration: none ;
	}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active { 
	color: #333 ;
	text-decoration: none ;
	}
	
	
/*personnalisation de chaque <li> avec des "id", fonctionne sous firefox */

#accueil a:hover, #accueil a:focus, #accueil a:active {
	border-top: solid 5px #FF0066;
	}
#spect a:hover, #spect a:focus, #spect a:active {
	border-top: solid 5px #0000FF;
	}
#agenda a:hover, #agenda a:focus, #agenda a:active {
	border-top: solid 5px #FFFF00;
	}
#ctc a:hover, #ctc a:focus, #ctc a:active {
	border-top: solid 5px #E0E0E0;
	}
#liens a:hover, #liens a:focus, #liens a:active {
	border-top: solid 5px #E0E0E0;
	}

Merci beaucoup.
Modifié par zampai (20 Dec 2008 - 13:32)

Personne n'a une petite idée ? une piste ?

svp ?

Ok, voilà la solution, en fait le id, il faut les attribuer aux balises <a> et pas au <li> pour que ça marche sous IE.

le code html :

<ul>
      
          <li><a id="accueil" href="#">Accueil</a></li>
          <li><a id="spect" href="#">Spectacles</a></li>
          <li><a id="agenda" href="#">Agenda</a></li>
          <li><a id="ctc" href="#">Contacts</a></li>
          <li><a id="liens" href="#">Liens</a></li>
        
</ul>    

et le code css :

ul {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

ul li {
float: left;
}

ul a {
border-top: solid 5px #ccc;
float: left;
margin: 0 2px;
padding: 5px 15px;
text-align: center;
text-decoration: none;
color: #666;
}

ul a:hover {
text-decoration: none;
color: #333; 
}



 a#accueil:hover,  a#accueil:focus,  a#accueil:active {
	 border-top: solid 5px #FF0066;
	}
 a#spect:hover,  a#spect:focus,  a#spect:active {
	border-top: solid 5px #0000FF;
	}
 a#agenda:hover,  a#agenda:focus,  a#agenda:active {
	border-top: solid 5px #FFFF00;
	}
 a#ctc:hover,  a#ctc:focus,  a#ctc:active {
	border-top: solid 5px #E0E0E0;
	}
 a#liens:hover,  a#liens:focus,  a#liens:active {
	border-top: solid 5px #E0E0E0;
	}

Bien sur, ces codes sont inspirés de l'excellente galerie de menu css alsacreations : ICI.

Merci beaucoup.

Salut,

juste en passant ton premier code fonctionnait : il fallait juste laisser la place pour le border-top... par exemple en augmentant le line-height.

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.