28234 sujets

CSS et mise en forme, CSS3

Probleme couleur item liste

Bonjour à tous,

J'ai un petit problème de couleur ici : http://www.chezgros.com/sitetest/
Dans le menu de gauche, avec IE6, les sous-choix apparaissent en gris, conformément à :

#navcontainer li li a  { color: #62675A;}


Dans Firefox 2, les sous-choix restent en rouge. Un petit coup de main pour me débloquer ? Ci-dessous les styles concernant le menu.

Merci.


#navcontainer ul
 {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: verdana, arial, sans-serif;
	
 }

#navcontainer li { margin: 0; margin-left:10px; }

 #navcontainer a
 {
 display: block;
 color: #9e3837;
 background-color: transparent;
 width: 160px;
 padding: 2px 10px;
 text-decoration: none;
 font-size: 14px;
 font-weight: bold;
 }
 
 #navcontainer a:hover
 {
	background-color: #FF8F59;
	color: #9e3837;
	border-right: 10px solid #B54434;
	padding: 2px 1px 2px 10px;
 }
 
#navcontainer ul ul
 {
 margin-left: 30px;
 padding: 0;
 list-style-type: none;
 }

 #navcontainer li li a
 {
 display: block;
 color: #62675A;
 background-color: transparent;
 width: 130px;
 padding: 2px 10px;
 margin: 0;
 text-decoration: none;
 font-size: 12px;
 font-weight: 200;
 }

Modifié par ouranos2 (09 Mar 2007 - 03:17)
L'interprétation de Firefox est correcte (on la retrouve d'ailleurs sous Opera et Konqueror...). Le sélecteur que tu utilises, 
#navcontainer li li a  { color: #62675A;}
ne correspond à aucun élément dans ta page, car tu n'as pas de li qui soit enfant ou descendant de li.

Le validateur HTML du W3C t'indiques une erreur d'imbrication de tes éléments : un élément ul ne peut pas contenir directement un autre ul.

La structure correcte est la suivante :
<ul>
	<li>Item de premier niveau
		<ul>
			<li>Item de second niveau</li>
		</ul>
	</li>
</ul>
Ton explication m'a permis d'arriver au résultat voulu, mais ma liste n'est toujours pas valide. En fait il s'agit d'un menu généré par une boucle spip. Et si le code du squelette a l'air valide maintenant, le html généré par spip ne l'est pas ... Si tu as une idée pour me faire respecter les bons usages ... ;o) Quoiqu'il en soit, merci de ton aide.


<div id="navcontainer">
<BOUCLE_exclure_rubriques_1 (RUBRIQUES){racine}{titre_mot=exclu} {doublons}></BOUCLE_exclure_rubriques_1>
<BOUCLE_rubriques_1(RUBRIQUES){racine}{par num titre}{doublons}>
<ul>
<li><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]</a>
<BOUCLE_sousrubriques_1(RUBRIQUES){id_parent}{par titre}>
<ul>
<li><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]</a></li>
</ul>
</li>
</BOUCLE_sousrubriques_1>
</ul>
</BOUCLE_rubriques_1>
</div>
Je connais les forums Spip. Je peux te dire que c'est pas gagné pour ce genre de questions sur le respect des standards ... ;o) Merci.
Bonjour,

Je crois que le souci vient du fait que certaines rubriques ne contiennent pas de sous-rubriques. En revanche, le code actuel du squelette les prévoit, d'où l'erreur de syntaxe dans le code généré.

	<ul>

	<li><a href="spip.php?rubrique1">Apéritifs</a>
		<ul>

			<li><a href="spip.php?rubrique13">Canapés</a></li>
			<li><a href="spip.php?rubrique14">Feuilletés</a></li>
			<li><a href="spip.php?rubrique19">Pain surprise</a></li>
			<li><a href="spip.php?rubrique15">Petits choux</a></li>
			<li><a href="spip.php?rubrique21">Sambos (samoussa)</a></li>
		</ul>
	</li>

	<li><a href="spip.php?rubrique6">Entrées et salades</a>
		<ul>
		</ul>
	</li>
</ul>


Il n'y a pas de sous-rubriques aux Entrées et Salades, mais la liste de second niveau est prévue dans le squelette.

Revoir un peu la syntaxe des boucles (syntaxe complète, qui prévoit justement ce cas).
Smiley smile
C'est une bonne idée. Il semblerait aussi que placer les balises de boucles après les balises <ul> fonctionne (conseil donné sur la liste spip). Merci de ton aide.
Sujet clos
Aller à