Superposition de classes

Bonjour,

je suis nouveau, merci de m'aider

j'ai un probleme :

j'ai un menu horizontal avec des images de fond pour chaque item. Je fais un rollover dessus. tout se passe bien : (je crois que j'ai repris le code sur ce site)

Sauf que j'ai remplacé les # par des . pour spécifier des classes.

Cela donne ça dans le css :

.menuTop
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

.menuTop li
{
	margin: 0 0 5px 0 ;
		float:left;
	background: url(menu.gif) no-repeat 0 0;  

}

.menuTop li a
{
	display: block ; 
	width: 82px ;
	line-height: 23px ;
	color: #000 ;
	padding-right:2px;
	text-decoration: none ;
	float:left;
	text-align:center;
	font-weight:bold;
	z-index:12;
}

.menuTop li a:hover
{
	background: url(menu.gif) no-repeat 0 -23px ; 
font-weight:bold;
	z-index:12;

}

le rollover marche impec.

dans le fichier html, j'ai ceci pour composer le menu :

<ul class="menuTop">
	<li class="selectionne"><a href="#">item n°1</a></li>
	<li class="nonSelectionne"><a href="#">item n°2</a></li>

	<li class="nonSelectionne"><a href="#">item n°3</a></li>
	<li class="nonSelectionne"><a href="#">item n°4</a></li>
	<li class="nonSelectionne"><a href="#">item n°5</a></li>

</ul>

ce que je veux en fait c'est que si l'utilisateur se trouve dans la rubrique "item 1", l'image de fond derriere item 1 soit la même que celle qui apparait au moment du roll over, et qu'elle y reste!

J'ai donc ce code dans le css :

		.selectionne{
	background: url(menu.gif) no-repeat 0 -23px;  
z-index:1;
}

.nonSelectionne{
	background: url(menu.gif) no-repeat 0 0;  
z-index:1;

}

Le probleme c'est que la propriété de la classe menuTop s'applique par dessus la classe "selectionne". En gros, je n'ai que des images de fond à l'état initial.
Si j'enleve l'image de fond de ".menuTop li" par contre ça marche.

Quelqu'un peut m'aider svp ? j'ai essayé de mettre les z-index mais ça ne marche pas du tout

Merci

Bonjour Pouscaillou et bienvenue sur ce forum

Si ton sujet ne trouve pas preneur, n'hésite pas à le faire remonter en postant à nouveau

il n'y a pas beaucoup de champions du css par ici a priori. Enfin, ce n'est pas grave, je me suis débrouillé autrement. Et ca marche.

Merci aux nombreuses personnes qui m'ont aidé

Pouscaillou a écrit :
il n'y a pas beaucoup de champions du css par ici a priori.

Si tu le dis C'est vrai que les CSS, on ne connaît pas trop ici, c'est pas du tout notre domaine
Pour tout te dire, on attendait la venue d'un champion en devenir comme toi.

Sérieusement : pour ma part je n'ai pas compris ton message ni ton problème puisque ce n'était pas expliqué assez clairement (pour moi) donc j'ai évité de répondre.

En passant, il est inutile de spécifier des class="nonSelectionne" à tous les liens. Il suffit de préciser le lien courant. Pour les autres, éviter les excès de Classite
... Enfin moi je dis ça mais j'y connais pas grand chose en CSS, comme les autres ici
Modifié par Raphael (02 Jun 2005 - 14:11)

a écrit :
Enfin, ce n'est pas grave, je me suis débrouillé autrement. Et ca marche.

Si tu pouvais poster ta solution, afin que les piètres CSSeurs puissent en bénéficier, ce serait bien...