Liste et css

Salut à tous et à toutes !

En pleine reflexion sur la réalisation d'un menu dynamique, je me heurte à un bête problème de représentation graphique...
J'explique...

Soit le code suivant :

<ul>
<li>noeud principal</li>
<ul>
<li>niveau 2</li>
<li> niveau 2
<ul>
<li>niveau 3</li>
<li>niveau 3</li>
</ul>
</ul>
</ul>

Nous avons donc un noeud principal auquel sont rattaché deux noeuds de niveau 2, à l'un de ces noeuds de niveau 2, nous avons deux autres noeuds de niveau 3.
Ma question concerne l'indentation.
De manière automatique, les noeuds de niveau 2 sont indentés par rapport au noeud principal. De même les noeuds de niveau 3 sont indentés par rapport aux noeuds de niveau 2. Normal quoi.

Ce que je desirerais :
indentation du noeud principal : aucune (au lieu de 1 actuellement)
indentation des noeuds de niveau 2 : aucune (au lieu de 2 actuellement)
indentation des noeuds de niveau 3 : 1 (au lieu de 3 actuellement)
indentation des noeuds de niveau x : x-2

Voilou, en gros... Si quelqu'un a une idée au niveau du css...
Merci bieng !

Bonjour,

Tout d'abord, corriger le code HTML, qui doit être du type:

<ul>
      <li>noeud principal
            <ul>
                  <li>niveau 2</li>
            <ul>
       </li>
</ul>

Pour l'indentation, utiliser simplement les sélecteurs CSS du type:

ul {
margin-left: 0;
padding-left: 0;
}
ul ul ul {
margin-left: 40px /* ou toute autre valeur souhaitée */
}

Enfin, puisque vous en êtes au stade de la réflexion, il est encore temps d'éviter la catastrophe ergonomique et de renoncer à descendre en dessous d'un unique sous-niveau (ne pas aller au delà de <ul><li>...<ul>)
Modifié par Laurent Denis (09 Feb 2007 - 09:36)

merci bien pour ces précisions !!

a écrit :

Enfin, puisque vous en êtes au stade de la réflexion, il est encore temps d'éviter la catastrophe ergonomique et de renoncer à descendre en dessous d'un unique sous-niveau (ne pas aller au delà de <ul><li>...<ul>)

Ceci dit indispensable dans mon cas étant donné que le système a pour but d'être utilisé pour la représentation de l'arborescence des contenus d'un site, dans un CMS.

Ce que rien n'empêche de faire bien plus ergonomiquement et accessible, en statique, avec un simple js permettant d'ouvrir et de fermer les différents niveaux (et le lien magique permettant de tout ouvrir/fermer, bien-sûr).
Modifié par Laurent Denis (09 Feb 2007 - 09:50)

lol
Le javascript est prévu. Inclure du javascvript n'empêche pas de profiter des listes pour profiter de l'indentation automatique...

Les deux questions (indentation et menu dynamique) n'ont aucun rapport... Mais laissons tomber, va pour l'imbittable menu déroulant à 6 niveaux excluant d'office le CMS concerné de divers tests qualité

<edit>naturellement, si par "dynamique" vous vouliez dire le type d'interaction décrit dans mon précédent post, et non un menu déroulant, alors, pas de problème.</>
Modifié par Laurent Denis (09 Feb 2007 - 10:55)