Plusieurs niveaux d�indentation

[francoisch]

bonjour

Je voudrais mettre en page en page en Html des lignes dans une logique visuelle de table des matières :

les lignes principales sont indentées dune valeur X par rapport à la marge

sous chaque ligne principale apparaissent une ou plusieurs lignes secondaires, indentées dune valeur Y par rapport à la ligne principale (ou à la marge)

sous chaque ligne secondaire apparaissent une ou plusieurs lignes tertiaires, indentées dune valeur Z

etc

Je pourrai utiliser simplement <ul> <li> </ul> mais je ne sais pas spécifier les valeurs dindentation nommées ici X, Y, Z.

Peut-être y a-t-il une autre solution, avec une CSS ?

Je ne parle pas ici de lindentation de la première ligne dun paragraphe.

Par avance merci de votre aide.

Francois

[baulet]

il me semble que padding devrait faire l'affaire...

soit en héritage li { padding-left: xxpx;} (X=Y=Z), soit en classes, ou tu spécifies dans li.class-X, li.classY, li.classZ le padding voulu.

[ellm]

Bonsoir,

Ton idée d'utiliser une liste non ordonnée est bonne. Il suffit ensuite de définir en CSS des marges pour les différents niveaux.

Le code HTML

<ul>
    <li>
        Ligne principale
        <ul>
            <li>Ligne secondaire</li>
            <li>Ligne secondaire</li>
        </ul>
    </li>
    <li>
        Ligne principale
        <ul>
            <li>
            Ligne secondaire
            <ul>
                <li>Ligne tertiaire</li>
                <li>Ligne tertiaire</li>
            </ul>
            </li>
            <li>Ligne secondaire</li>
        </ul>
    </li>
    <li>
        Ligne principale
        <ul>
            <li>Ligne secondaire</li>
            <li>Ligne secondaire</li>
            <li>Ligne secondaire</li>
        </ul>
    </li>
</ul>

Le code CSS

ul, li {
    list-style:none; /* Pour enlever les puces */
    margin:0; /* On met les marges externes par défaut à zéro */
    padding:0; /* On met les marges internes par défaut à zéro */
}
ul li /* Lignes principales */
{
    padding-left:5px;    /* marge gauche */    
}
ul li li /* Lignes secondaires */
{
    padding-left:20px; /* marge gauche */    
    color:#1D3652;    /* couleur de police */        
}
ul li li li /* Lignes teritaires */
{
    padding-left:30px; /* marge gauche */    
    color:#528F6C;    /* couleur de police */
}

Modifié 5 Octobre 2010 par ellm

[yuston]

Une table des matières est une liste de liens ordonnée (amha) et donc, il serait logique d'opter une solution en faveur des listes, donc imbrication de listes. Le code HTML de ellm me semble tout à fait convenir à ton objectif.

[francoisch]

bonjour

Vos réponses me sont très utiles et intéressantes.

Je vous en remercie, je vais travailler avec ça.

Francois