[résolu]Table imbriquée

Bonjour,

Un peu d'aide SVP :
Code HTML

<ul class="services">
	<li class="page_item"><a href="/gestion-contenu/" title="Gestion de Contenu">Gestion de Contenu</a>
		<ul class="tata">
			<li class="toto"><a href="/gestion-contenu/blogs/" title="Blogs">Blogs</a>	</li>
			<li class="toto"><a href="/gestion-contenu/cms/" title="CMS">CMS</a>	</li>
		</ul>
	</li>
	<li class="page_item"><a href="/logiciels-libres/" title="Logiciels Libres">Logiciels Libres</a></li>
</ul>

Code CSS

#subcontent ul.services li {list-style-image:url(images/services.gif);}
#subcontent ul.services li.page_item {list-style-image:url(images/post_blue.gif);}
#subcontent ul.tata li.toto {list-style-type:circle;color:#3cacd2;}

Résultat :
le style ne s'applique pas pour la balise li.toto imbriqué dans ul.tata tout celà déjà imbriqué dans ul.services li.page_item.

Comment accéder (en vue de les différencier) à des sous-niveaux dans des listes imbriquées ?

Merci de votre aide.
Modifié par sytou (28 Jan 2006 - 14:14)

Bonjour,

La propriété list-style-type ne neutralise pas l'héritage de list-style-image.

Ajouter un list-style-image: none; sur ul.tata li.toto pour revenir aux valeurs d'images de puces par défaut sur ce niveau.
Modifié par Laurent Denis (28 Jan 2006 - 13:17)

Allez j'abuse ...
CSS
#subcontent ul li {border-bottom-color:#F0F0F0;}
Dans le code HTML, le résultat affiche le border-bottom avec la fermeture de la première liste. Ce qui donne le résultat suivant :

Gestion de Contenu
[i]tabulation[/i]Blogs (souligné)
[i]tabulation[/i]CMS (souligné)
(souligné)

Ce dernier souligné me gene et je voudrais qu'il s'applique au "Gestion de Contenu"
J'ai essayé de jouer sur le critère display (block et inline-block) mais celà ne m'a rien donné de bon.
Merci en tout cas pour la promptitude et l'exactitude.

PS : désolé ce n'est pas visible en ligne.

Salut Sytou,
Résultat logique vu que ta liste est imbriquée dans <li></li>.
tu peux styler la balise <a> en ajoutant au sélecteur li a (par exemple) les déclarations display: block; et celle pour la bordure du bas.

Autre avantage : les liens ne seraient plus cliquables qu'au dessus seulement du texte.
précaution : un petit bug d'IE appelé parfois "white space bug". Pas très méchant, on en vient à bout de différentes manières (display: inline sur li, ou width: 100% sur li a, ou en supprimant les espaces dans le code html au niveau de la liste (pas terrible pour la lisibilité), et d'autres...

A+
Modifié par Alan (28 Jan 2006 - 16:51)

Je n'ai pas bien compris ta remarque.
Le résultat souhaité est :

Gestion de Contenu(souligné)
tabulationBlogs (souligné)
tabulationCMS (souligné)

En appliquant une bordure inférieure aux élément <li>, disons que tu trace un trait sur le bord inférieur de chaque boîte bloc correspondant à un <li>. Or, la boîte du <li> de premier niveau comprend non seulement le texte "Gestion de Contenu", mais aussi la liste de second niveau. La bordure apparaît donc tout à fait normalement en dessous de celle-ci.

La solution est effectivement d'appliquer la propriété de bordure aux liens contenus dans les <li>. En revanche, il n'est pas nécessaire pour cela de leur appliquer un display:block.
Modifié par Laurent Denis (28 Jan 2006 - 19:33)