AccueilRessources

Les listes ol et ul et les CSS

Utilisation de <ul>, <ol> et <li>

Les listes <ul> et <ol>

Les listes <ul> et <ol> sont de type block.

Avec les navigateurs standards les marges sont : margin: 16px 0.

Avec les navigateurs standards les remplissages sont : padding: 0 0 0 40px. Le décalage à gauche des listes est dû à ces 40 pixels de remplissage gauche.

Les items des listes <li>

Les items des listes <li> sont de type list-item.

Avec les navigateurs standards les marges sont : margin: 0.

Avec les navigateurs standards les remplissages sont : padding: 0.

L’illustration de chaque item des listes <li> est placée en dehors de la boîte d’affichage. Elle est donc placée dans le padding-left de l’élément <ul>. Cela correspond à la propriété CSS list-style-position: outside.

Le code HTML d'une liste simple :

                                     
<ul>
<li>titi</li>
<li>toto</li>
<li>tutu</li>
<li>tata</li>
<li>tete</li>
</ul>

Voilà la structure d'affichage de la liste <ul> avec ses items <li> :

Imbrication de listes

Voici le code HTML d’une imbrication, vous avez deux listes <ul> :

                                          
<ul>
<li>Premier                                                                                                                                                               
<ul>
<li>titi</li>
<li>toto</li>
<li>tutu</li>
<li>tata</li>
<li>tete</li>
</ul>
</li>
<li>Deuxième                                                                                                                                                               
<ul>
<li>dodo</li>
<li>didi</li>
<li>dudu</li>
</ul>
</li>
</ul>

Voilà la structure d’affichage :

Modifier les CSS

Position de l'illustration des <li>

Par défaut la position de l'illustration des listes est placée en dehors de la boîte d'affichage des items des listes.

Avec la propriété list-style-position: inside; vous pouvez placer l'illustration dans la boîte d'affichage des items de la liste <li>.

Le style CSS :

 .inside {
list-style-position: inside;
}

Le code HTML :

                                     
<ul class="inside">
<li>titi</li>
<li>toto</li>
<li>tutu</li>
<li>tata</li>
<li>tete</li>
</ul>

Voilà la structure d'affichage avec les illustrations en interne :

Modifier le remplissage des <ul>

Avec un affichage par défaut des illustrations en list-style-position: outside;, si vous spécifiez un remplissage à 0, padding: 0, vous supprimer la zone d'affichage des illustrations, qui ne seront plus affichées dans la boîte d'affichage de la liste <ul>. Les illustrations pourront ne plus être visibles si, par exemple, la liste <ul> est directement dans le <body>.

Le style CSS :

.remplissage {
padding:0;
}

Le code HTML :

                                     
<ul class="remplissage">
<li>titi</li>
<li>toto</li>
<li>tutu</li>
<li>tata</li>
<li>tete</li>
</ul>

Vous retrouverez les illustrations, si vous spécifiez un affichage list-style-position: inside; sur le <ul>.

Les styles CSS :

 .remplissage {
padding: 0;
}
.inside {
list-style-position: inside;
}

Le code HTML :

                                     
<ul class="remplissage inside">
<li>titi</li>
<li>toto</li>
<li>tutu</li>
<li>tata</li>
<li>tete</li>
</ul>

Effectuer une exception sur un <li>

Rien ne vous empêche de faire une exception sur un item <li> d'une liste <ul>.

Le code CSS

 .special {
list-style: upper-roman outside;
}

Le code HTML:

                            
<ul>
<li>titi</li>
<li class="special">toto</li>
<li>tutu</li>
<li>tata</li>
<li>tete</li>
</ul>

L'héritage des styles

Position des illustrations

Voici le code HTML d'une liste imbriquée.

                           
<ul>
<li>Premier                                                                                     
<ul>
<li>titi</li>
<li>toto</li>
<li>tutu</li>
<li>tata</li>
<li>tete</li>
</ul>
</li>
<li>Deuxième                                                                                     
<ul>
<li>dodo</li>
<li>didi</li>
<li>dudu</li>
</ul>
</li>
</ul>

Si vous appliquez un style à la première liste <ul>, la deuxième en héritera.

Le code CSS :

 .inside {
list-style-position: inside;
}

Le code HTML :

                          
<ul class="inside">
<li>Premier                                                                            
<ul>
<li>titi</li>
<li>toto</li>
<li>tutu</li>
<li>tata</li>
<li>tete</li>
</ul>
</li>
<li>Deuxième                                                                            
<ul>
<li>dodo</li>
<li>didi</li>
<li>dudu</li>
</ul>
</li>
</ul>

Cibler les listes imbriquées

Si vous souhaitez mettre en forme les deuxi listes <ul> indépendamment de la première, vous devez les cibler avec une classe spécifique (.special) ou un sélecteur contextuel (ul ul).

Le code CSS :

 .special {
list-style: upper-roman outside;
}
ul ul {
list-style: decimal outside;
}

Le code HTML :

                       
<ul class="inside">
<li>Premier                                                         
<ul class="special">
<li>titi</li>
<li>toto</li>
<li>tutu</li>
<li>tata</li>
<li>tete</li>
</ul>
</li>
<li>Deuxième                                                         
<ul>
<li>dodo</li>
<li>didi</li>
<li>dudu</li>
</ul>
</li>
</ul>

Voici la structure d'affichage des listes <ul> imbriquées :

Ajouter un Commentaire

JComments

Livre Photoshop CS3 - Téléchargement libre et gratuit

Les dernières nouveautés

Lisez les critiques et les analyses sur mes livres

Nouvelle ressource web : les générateurs CSS3 en ligne

Les listes ol et ul et les CSS

Utilisation de <ul>, <ol> et <li>

Les listes <ul> et <ol>

Les items des listes <li>

Imbrication de listes

Modifier les CSS

Position de l'illustration des <li>

Modifier le remplissage des <ul>

Effectuer une exception sur un <li>

L'héritage des styles

Position des illustrations

Cibler les listes imbriquées

Ajouter un Commentaire

Dernier livre publié

Formation vidéo

Mes livres

WordPress

Création de sites web

Qui est en ligne

Twitter