[resolu] Interférence entre 2 menus en css

Bonjour,
Voilà, je désirerais employer deux menus css sur une même page
- 1 un menu principal avec une simple liste horizontale
- 2 un sous menu avec une image survolée tiré des tutos http://css.alsacreations.com/modelesmenus/g01.htm (encore merci pour toutes ces infos précieuses !)
Séparement les deux menus fonctionnent très bien
mais lorsque j'appelle les deux css sur une même page il y a un gros bug et de serieuses interferences....pourtant les identifiants ne sont pas les mêmes .....
ma page de menu principal est ici http://ypix.org/w_menu_principal.html
ma page avec le menu secondaire est ici http://ypix.org/w_sous_menu.html
la page appelant les deux css...
http://ypix.org/w_avec_les_2_css.html

Auriez vous une solution pour contourner ce probleme?
yvo
Modifié par yvo (11 Jan 2006 - 20:06)

Salut Yvo,

Si je ne me trompe pas, ton problème, c'est que tu veux mettre dans un menu vertical un menu horizontal. Dans un premier temps, dans menu_principal.css tu spécifies un menu vertical, avec l'identifiant 'navlist', puis dans sous_menu.css, tu définis un menu horizontal sans aucun identifiant. Vu que tu spécifies le fichier sous_menu.css en deuxième, alors la propriété des cascades du CSS fait que tu redéfinis la liste, donc choisi une liste horizontale. J'espère en pas dire des bêtises.
Pour résoudre ton problème, tu peux faire ainsi :

.navcontainer{
	width: 750px;
}
.navlist ul { /* utilisation de liste pour le menu */
	list-style-type: none;  /* suppression des puces de liste */
	margin:0;
	padding:0;
}
.navlist ul {
	position: absolute; 	
	height: 100px;
	width: 150px;
	left: 620px;
	top:130px;
	background: transparent url(menu.jpg) top left no-repeat;
	text-align: left;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.navlist li {
display: inline; /* correction pour IE5 et IE5.5 */
}
.navlist li a {
	text-indent:10px;
	display: block;
	height: 20px;
	width: 150px;
	line-height: 20px;
	color: #ccc;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-transform: capitalize;
	font-weight: bold;
}
.navlist li a:hover {
color: #6699CC;
background: transparent url(menu.jpg) top left no-repeat;}
.navlist a#menu1:hover {
	background-position: 0% -100px;
}
.navlist a#menu2:hover {
	background-position: 0% -120px;
}
.navlist a#menu3:hover {
	background-position: 0% -140px;
}
.navlist a#menu4:hover {
background-position: 0% -160px;
}
.navlist a#menu5:hover {
background-position: 0% -180px;
}

Tout ça pour un seul fichier CSS, ça suffira .

SI j'ai dis une bêtise à un moment ou un autre, n'hésitez pas à me corriger, je suis pas encore expert de la matière.

Bonjour Trunks,
Merci de t'être penché sur mon problème!
Mais je me suis mal exprimé:
Je voudrais que les deux menus restent totalement indépendants l'un de l'autre
leur seul point commun sera d'être sur une meme page
Les deux css ne sont là que pour mes tests; je compte à l'avenir
(si ca marche ! ) les regrouper.
mais là le premier menu interprete la css du sous menu ,
... ce qui me pose probleme
yvo

Bonsoir

yvo a écrit :
pourtant les identifiants ne sont pas les mêmes .....

Si j'ai bien suivi cette histoire tortueuse : les styles contenus dans http://ypix.org/sous_menu.css ne sont liés à aucun sélecteur spécifique de telle ou telle liste ul : ils s'appliquent à toutes les listes contenues dans la page. Ils interfèrent donc tout à fait normalement avec les styles de http://ypix.org/menu_principal.css ...

Pour utiliser ces deux styles dans la même page, modifier http://ypix.org/sous_menu.css pour rendre ses sélecteurs propres à un id ou à une classe quelconques.
Modifié par Laurent Denis (10 Jan 2006 - 18:14)

Bonsoir Laurent,
Pour ton aide ! il y a dejà du mieux....
j'ai appliqué une class "sousmenu" et desormais les deux menus sont independants
Par contre en faisant cela je n'ai plus l'image permanente de mon sous menu...
elle apparait par contre bien au survol de la souris
Il y a surrement encore quelque chose que je n'ai pas fait correctement
le tout est visible sur cette page http://ypix.org/w_avec_les_2_css.html
je mets egalement la css de mon sous menu

.sousmenu ul, .sousmenu li { /* utilisation de liste pour le menu */
list-style-type: none;  /* suppression des puces de liste */
margin:0;
padding:0;
}
.sousmenu ul {
	position: absolute; 	
	height: 100px;
	width: 150px;
	left: 620px;
	top:130px;
	background: transparent url(menu.jpg) top left no-repeat;
	text-align: left;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.sousmenu li {
display: inline; /* correction pour IE5 et IE5.5 */
}
.sousmenu li a {
	text-indent:10px;
	display: block;
	height: 20px;
	width: 150px;
	line-height: 20px;
	color: #ccc;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-transform: capitalize;
	font-weight: bold;
}
.sousmenu li a:hover {
color: #6699CC;
background: transparent url(menu.jpg) top left no-repeat;}
.sousmenu a#menu1:hover {
	background-position: 0% -100px;
}
.sousmenu a#menu2:hover {
	background-position: 0% -120px;
}
.sousmenu a#menu3:hover {
	background-position: 0% -140px;
}
.sousmenu a#menu4:hover {
background-position: 0% -160px;
}
.sousmenu a#menu5:hover {
background-position: 0% -180px;
}

et le html du sous menu

<ul class="sousmenu">
  <li><a id="menu1" title="menu1" accesskey="1" href="#">AAAAAAAA</a></li>
  <li><a id="menu2" title="menu2" accesskey="2" href="#">BBBBBBBBB</a></li>
  <li><a id="menu3" title="menu3" accesskey="3" href="#">CCCCCCCCC</a></li>
  <li><a id="menu4" title="menu4" accesskey="4" href="#">DDDDDDDDD</a></li>
  <li><a id="menu5" title="menu5" accesskey="5" href="#">EEEEEEEEE</a></li>
</ul>

yvo

Petite erreur de sélecteur : .sousmenu ul vise quelque chose comme :

<div class="sousmenu">
   <ul>
...

Il faut utiliser un ul.sousmenu pour atteindre ton :

<ul class="sousmenu">

Au temps pour moi, je pensais que c'était le même effet que tu voulais reproduire mais avec un menu horizontal. Comme l'a précisé Laurent Denis, .sous_menu ul est différent de ul.sou_menu, faut bien faire la distinction

Bonjour,
Super, c'est genial ça fonctionne nikel !!!
Par contre je ne pige pas trop la différence entre .sous menu ul et sousmenu.ul...
... et du coup ne suis pas certain que ma css soit vraiment correcte;
elle valide pourtant en dehors d'avertissements relatifs à l'absence de couleur de fonds (ceux ci, je crois, ne sont pas trop importants?)
Si vous pouviez y jeter un dernier petit coup d'œuil ce serait super sympa !
En tous les cas un grand merci pour votre aide !
yvo

ul.sousmenu, li.sousmenu { /* utilisation de liste pour le menu */
list-style-type: none;  /* suppression des puces de liste */
margin:0;
padding:0;
}
ul.sousmenu {
	position: absolute; 	
	height: 100px;
	width: 150px;
	left: 620px;
	top:130px;
	background: transparent url(menu.jpg) top left no-repeat;
	text-align: left;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.sousmenu li {
display: inline; /* correction pour IE5 et IE5.5 */
}
.sousmenu li a {
	text-indent:10px;
	display: block;
	height: 20px;
	width: 150px;
	line-height: 20px;
	color: #ccc;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-transform: capitalize;
	font-weight: bold;
}
.sousmenu li a:hover {
color: #6699CC;
background: transparent url(menu.jpg) top left no-repeat;}
.sousmenu a#menu1:hover {
	background-position: 0% -100px;
}
.sousmenu a#menu2:hover {
	background-position: 0% -120px;
}
.sousmenu a#menu3:hover {
	background-position: 0% -140px;
}
.sousmenu a#menu4:hover {
background-position: 0% -160px;
}
.sousmenu a#menu5:hover {
background-position: 0% -180px;
}

Bonsoir,
Bon ça fonctionne bien et ça valide.
..et je n'ai pas mis de "resolu" ...
pour le reste je vais continuer de me familiariser tout ça!
Merci encore pour votre aide !
yvo