Problème menu image

Bonsoir,
Je suis en train de passer mon site en xHTML (http://www.tomysnockers.net), et malgrès les nombreux tutoriaux, les nombreux dicos, j'ai un peu de mal à adapter mes vieux tableaux au CSS .

Mon début de xHTML est ici: http://www.tomysnockers.net/tomysnockersv2/

Mon problème est pour le menu en image. Je n'arrive pas à afficher le 3ème status des images-onglet. J'ai 3 status sur une image:
- la souris est en dehors du bouton
- la souris est sur le bouton
- la page affichée, est le bouton actuelle

J'ai un problème avec le dernier status, j'ai voulut adopté cette méthode:

	<div id="menuh">
		<ul>
			<li id="menuhnew" <?php if($_GET['rep'] == "news") echo 'class="active"'; ?>><a href="index.php?rep=news" title=""><span>News</span></a></li>
			[...]
</ul>
</div>

pour qu'il y est 'class="active"' pour le bouton actif.

et dans mon CSS:

#menuh li.active {
	background-position: 0% -70px;
}

Mais ca ne fonctionne pas ...

Quelqu'un aurait il une solution?

Autre question:
Existe t-il un moyen pour avoir un découpage des images de mon menu plus propres? afin de découpé plus petit mes bouton de menu et avoir un "spacer"
du genre :

<ul>
<li>News</li>
<li><img src="spacer.gif"></li>
<li>Compétences</li>
</ul>

Mais je ne pense pas que ce soit correct ....


Merci pour vos réponses

Bonjour,

La classe active est une bonne idée. Tu cherches à modifier la position de l'arrière-plan d'un lien du menu lorsqu'il est actif. Pour que cela fonctionne, il faut donc ajouter a comme ceci :

#menuh li.active a {
	background-position: 0% -70px;
}

Tu obtiendras ainsi l'effet escompté. En ce qui concerne les images de type spacer.gif, elles sont clairement à déconseiller. Raphaël en parlait dans sa comparaison entre tableaux et div. Mais tu peux plutôt opter pour un découpage "serré" des boutons et ajouter par la suite des margin dans ta feuille CSS. Cela te permettra de modifier par la suite ce paramètre, qui dépendra du nombre de liens que comportera ton menu.

J'ai essayé cette solution mais elle ne semble pas marché ... (peut être ne peut on pas modifier une propriété avec une class qui est définit avec l'id ?)

J'ai donc opté pour une solution plus barbare:

<li <?php if(!isset($stylecom)) echo 'id="menuhcom"'; else echo 'id="'.$stylecom.'"'; ?>>

et :

#menuhcomactive a{
	background: url(images/boutoncompetences.gif)  no-repeat right top;
	background-position: 0% -52px;
	width: 103px;
	height: 26px;
	margin-top: 9px;
}

Si vous avez une autre solution plus propre, je suis toujours preneur ! (http://www.tomysnockers.net/tomysnockersv2/)

J'ai trouver comment bien espacé mes élement, merci!