j'utilise deux menus avec effet rollover grace à une image ,
pour l'instant ils sont tous les deux sur des fichiers séparés,
je veux les assembler dans une même page et une même feuille de style
externe, simplement, ils utilisent les même balises,
notamment les balises UL, LI, et Li a,

comment différencier ces balises,
et les attribuer chacune à leur menu respectif pour pas que le navigateur
les confondent ,

j'ai réussi avec la balise UL en utilisant UL#nomdemonmenu,

mais pour les autres je n'y arrive pas, notamment pour Li a
et Li a:hover ??

merci d'avance !


-------------------------------------------------------------
UL {	                    /* utilisation de liste pour le menu */
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px; 
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
list-style-type: none;	/* suppression des puces de liste */
margin:0;
padding:0;
}

li {
float: left;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px; 
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
}


UL#menuico {
	BACKGROUND: url(images/ico.jpg) no-repeat left top;
	WIDTH: 650px;
	POSITION: absolute;
	TEXT-ALIGN: center;
	height: 93px;
	left: 0px;
	top: 0px;
	}

li {float: left;}

li a {	/* dimensions et définitions des boutons */
display: block;	/* mise en block de <a> pour lui donner des dimensions */
height: 93px;
width: 128px;
FONT-FAMILY: arial, serif;
font-size: 14px
line-height:50px;/* hauteur de ligne pour éviter les paddings */
font-weight: bold;
font-family: arial, serif;
text-decoration: none;
}

li a:hover {
background:  url(images/ico.jpg) no-repeat left top;
}

Modifié par jaenani (07 Jul 2005 - 17:04)
D'après ce que je comprend, tes deux menu sont contenu dans deux liste ul.

Le plus simple est de faire tout simplement ceci :

<ul id="menu1"> tous les li du menu1</ul><ul id="menu2">tous les li du menu2</ul>


Ensuite tu fais comme ceci pour toutes tes règles :

ul#menu1{ ...}
ul#menu1 li{ ..} /* ne concernera que les li du menu 1 */
ul#menu1 li a:hover {.....} /* que concernera que les li a:hover du menu 1*/



idem pour le menu 2 Smiley smile

Deux petites remarques :

- à ta place je prendrais l'habitude d'écrire mes règles en minuscule

- peux tu écrire ton code entre les balises [ code] , comme l'indiquent les règles

Smiley smile
Ok merci bcp TriadPtale pour ton aide !
je vais essayer , mais je pense que c'est ça !

pour le code je vais le mettre en minuscule également, merci !
pour les balises code, j'avais pas vu! je ferai ça la prochaine fois Smiley cligne
De rien Smiley cligne

Pour les balises code, tu peux modifier ton premier message Smiley smile

Ce n'est pas pour emm*** le monde , mais ça rend la lecture du forum nettement plus simple.
j'ai bien suivi tes conseils,

voici le code du fichier du menu1,
mais le fait de différencier les ul
m'annule l'effet de rollover ?



body {
background: #000000;
}


ul#menuico {	/* utilisation de liste pour le menu */
padding-right: 0px;
padding-left: 0px; 
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
list-style-type: none;	/* suppression des puces de liste */
margin:0;
padding:0;
}

ul#menuico li {
float: left;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px; 
padding-top: 0px;
list-style-type: none;
}


ul#menuico {
	background: url(images/ico.jpg) no-repeat left top;
	width: 650px;
	position: absolute;
	text-align: center;
	height: 93px;
	left: 0px;
	top: 0px;
	}

ul#menuico li {float: left;}

ul#menuico li a {	/* dimensions et définitions des boutons */
display: block;	/* mise en block de <a> pour lui donner des dimensions */
height: 93px;
width: 128px;
font-family: arial, serif;
font-size: 14px
line-height:50px;/* hauteur de ligne pour éviter les paddings */
font-weight: bold;
font-family: arial, serif;
text-decoration: none;
}

ul#menuico li a:hover {
background:  url(images/ico.jpg) no-repeat left top;
}


a#menuico1:link {
background-position: -642px 0%;	/* décalage de l'arrière-plan pour chaque bouton */
color: #acdeeb;
}
a#menuico1:hover {
background-position: -642px 0%;	/* décalage de l'arrière-plan pour chaque bouton */
color: #d8e6c9;

}

a#menuico1:active {
background-position: -642px 0%;	/* décalage de l'arrière-plan pour chaque bouton */
color: #acdeeb;
}

a#menuico2:hover {
background-position: -770px 0%;
color: #d8e6c9;
}

a#menuico2:active {
background-position: -770px 0%;	/* décalage de l'arrière-plan pour chaque bouton */
color: #acdeeb;
}

a#menuico3:hover {
background-position: -898px 0%;
color: #d8e6c9;
}
a#menuico3:active {
background-position: -898px 0%;	/* décalage de l'arrière-plan pour chaque bouton */
color: #acdeeb;
}
a#menuico4:hover {
background-position: -1026px 0%;
color: #d8e6c9;
}
a#menuico4:active {
background-position: -1026px 0%;	/* décalage de l'arrière-plan pour chaque bouton */
color: #acdeeb;
}
a#menuico5:hover {
background-position: -1154px 0%;
color: #d8e6c9;
}
a#menuico5:active {
background-position: -1154px 0%;	/* décalage de l'arrière-plan pour chaque bouton */
color: #acdeeb;
}






-->
</style>

</head>
<body>
<ul id="menuico">
	<li ><a id="menuico1" title="faq"  href="#">  </a></li>
	<li ><a id="menuico2" title="accueil"  href="#"></a></li>
	<li ><a id="menuico3" title="plan"  href="#"></a></li>
	<li ><a id="menuico4" title="contact"  href="#"></a></li>
	<li><a id="menuico5" title="infos légales"  href="#"> </a></li>
</ul>



</body>
</html>
Non, ça doit pouvoir fonctionner avec effet de survol.

Mais je ne comprend pas bien:

tu as deux fois une règle pour ul#menuico

Ha je vois :

ul#menuico li a:hover {
background: url(images/ico.jpg) no-repeat left top;
}
...
...
a#menuico3:hover {
background-position: -898px 0%;
color: #d8e6c9;
}


Les règles de priorité jouent :

la première règle à la priorité sur la deuxième.

Donc réécrit par exemple la deuxième comme ceci :

ul#menuico li a#menuico3:hover

(idem pour les autres )

Smiley smile
C bon j'ai trouvé, pour ceux que qui seraient interessés,

j'avais simplement oublié de rajouter la balise ul#nomdemonmenu devant la balise de lien a#menuico3:hover

en résumé

 ul#nomdemonmenu a#menuico3:hover{ ....}

et ça marche !!

merci encore TriadPtale !