[Résolu] Liste hiérarchique xhtml + css

Salut tout le monde,

J'ai un problème avec une liste valide xhtml.
Voici le code :

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Inscription</a></li>
	<li><a href="#" id="connec-button">Connexion</a></li>
	<li><a href="#">Historique</a></li>
	<li><a href="#">Classement</a></li>

	<li>
		<ul>
			<li><a href="#">Type partie 1</a></li>
			<li><a href="#">Type partie 2</a></li>
			<li><a href="#">Type partie 3</a></li>
		</ul>
	</li>

	<li><a href="#">T&eacute;l&eacute;chargements</a></li>
	<li>
		<ul>
			<li><a href="#">Version 1</a></li>
			<li><a href="#">Version 1.1</a></li>
			<li><a href="#">Version 1.2</a></li>

			<li><a href="#">Changelogs</a></li>
		</ul>
	</li>
</ul>

Et le résultat :
http://img443.imageshack.us/img443/9600/20080328145843us3.png

Comme vous pouvez le voir, il y a une sorte de "double puce" au niveau du classement et des téléchargements.
Comment faire pour éviter ce doublon ?

Merci beaucoup
Modifié par NeqO (28 Mar 2008 - 16:06)

NeqO a écrit :
Comme vous pouvez le voir, il y a une sorte de "double puce" au niveau du classement et des téléchargements.
Comment faire pour éviter ce doublon ?

Questions:

1. Sans le moindre style CSS appliqué?
2. Avec quel(s) navigateur(s)?

Pour le premier point, il me semble que si tu utilises list-style sur les li au lieu de l'utiliser sur les ul ou ol, tu peux avoir ce genre de problème.

NeqO a écrit :


Comme vous pouvez le voir, il y a une sorte de "double puce" au niveau du classement et des téléchargements.
Comment faire pour éviter ce doublon ?

C'est un rendu normal dans FF et Opera notamment, sans styles CSS autres que ceux des navigateurs. Dans ce cas, il est inutile de vouloir l'éviter.

Mon screenshot ici est sans le CSS, avec le CSS ça donne ceci :



et le CSS :

#menu {
	width: 200px;
	position: absolute;
	left: 10px;
	top: 220px;
	z-index: 100;
}

#menu li {
	list-style-image: url(img/puce.png);
	padding-top: 5px;
}

Cela se passe avec n'importe quel navigateur.

Laurent Denis a écrit :


C'est un rendu normal dans FF et Opera notamment, sans styles CSS autres que ceux des navigateurs. Dans ce cas, il est inutile de vouloir l'éviter.

Mais comment éviter que la puce apparaisse deux fois ?

Edit : en utilisant ol au lieu de li ça ne change pas
Modifié par NeqO (28 Mar 2008 - 15:48)

Hmm...

Ta structure ne devrait-elle pas être comme suit?

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Inscription</a></li>
	<li><a href="#" id="connec-button">Connexion</a></li>
	<li><a href="#">Historique</a></li>
	<li><a href="#">Classement</a>
		<ul>
			<li><a href="#">Type partie 1</a></li>
			<li><a href="#">Type partie 2</a></li>
			<li><a href="#">Type partie 3</a></li>
		</ul>
	</li>
	<li><a href="#">T&eacute;l&eacute;chargements</a>
		<ul>
			<li><a href="#">Version 1</a></li>
			<li><a href="#">Version 1.1</a></li>
			<li><a href="#">Version 1.2</a></li>
			<li><a href="#">Changelogs</a></li>
		</ul>
	</li>
</ul>

C'était exactement ça !

Merci beaucoup !