Suppression des puces

Bonjour, le code : list-style-type: none; pour la suppression des puces doit-il se placer plutôt sur un style associé aux éléments de la liste <li> ou doit-on le placer sur la liste elle-même <ul> de préférence ????
Ou plus simplement est-ce sans importance ??

Marc.

si tu l'appliques sur le <ul> tu peux appliquer une class sur les li où tu désires une puce dans la liste :

.puce
{
list-style-type: none;
}

si tu appliques sur le <li> tu vas devoir utiliser la mention !important....

En gros, ça dépend de ce que tu veux faire, il y a surement d'autres finesses que j'ai omis
Modifié par zzs (20 Jan 2009 - 10:55)

Dois-je imposer la suppression des puces sur une seul boîte ou sur les 2 ?
Pour moi d'instinct je l'aurais mis sur la boîte #principal mais bon j'ai un doute.

#principal { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#principal .secondaire {
	margin: 0px; 
	padding: 0px; 
	list-style-type: none;
}

<ul id="principal"><!--Debut de la liste globale-->
	
	
<li><a href="#">Page 1</a>
	  <ul class="secondaire"><!--Debut premier sous menu-->
		<li><a href="#">Page 1 - Sous-page 1</a></li>
		<li><a href="#">Page 1 - Sous-page 1</a></li>
		<li><a href="#">Page 1 - Sous-page 1</a></li>
	  </ul><!--Fin premier sous menu-->
</li>
</ul>

J'ai fini un menu déroulant, j'aimerais avoir votre avis sur le code sachant que je débute et donc je peux faire des erreurs.

#principal { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#principal .secondaire {
	margin: 0px; 
	padding: 0px; 
	list-style-type: none;
	display: none; 
}
a {/*Couleur des liens*/ 
	text-decoration: none;/*On supprime le trait*/
	background: #E0FCC8; 
	display: block; /*On transforme les liens en block*/ 
	padding: 5px 6px;/*Marges internes pour donner des dimensions aux blocks*/
}
a:hover {
	color: #000000;
	background-color: #A5F95B;/*Couleur de fond au survol*/
}
#principal li { /*Definit l allure des entrees du menu principal*/
	width: 150px;/*Largeur des menus*/
	float: left;/*Positionnement flottant pour le deuxieme menu menu a droite*/
}
#principal li:hover > .secondaire {/*Definit le comportement des elements <ul> de classe secondaire*/
/*L initialisation a la valeur block de la propriete display provoque l affichage du menu secondaire correspondant*/ 
	display: block; 
}

<ul id="principal"><!--Debut de la liste globale-->
		
	<li><a href="#">Page 1</a>
	  <ul class="secondaire"><!--Debut premier sous menu-->
		<li><a href="#">Page 1 - Sous-page 1</a></li>
		<li><a href="#">Page 1 - Sous-page 1</a></li>
		<li><a href="#">Page 1 - Sous-page 1</a></li>
	  </ul><!--Fin premier sous menu-->
  </li>
	
	<li><a href="#">Page 2</a>
	  <ul class="secondaire"><!--Debut deuxieme sous menu-->
		<li><a href="#">Page 2 - Sous-page 2</a></li>
		<li><a href="#">Page 2 - Sous-page 2</a></li>
		<li><a href="#">Page 2 - Sous-page 2</a></li>
	  </ul><!--Fin deuxieme sous menu-->
  </li>

		
	<li><a href="#">Page 3</a>
	  <ul class="secondaire"><!--Debut troisieme sous menu-->
		<li><a href="#">Page 3 - Sous-page 3</a></li>
		<li><a href="#">Page 3 - Sous-page 3</a></li>
		<li><a href="#">Page 3 - Sous-page 3</a></li>
	  </ul><!--Fin troisieme sous menu-->
  </li>
	
</ul><!--Fin de la liste globale-->