(Mise à jour le 21 août 2008 à 22:11)
Il existe sans doute de nombreux sites présentant le sujet, mais ayant eu besoin, sur le plan professionnel, de fournir quelques explications sur ce thème, je vous en fait bénéficier…
Liste non ordonnée
Pour afficher des puces, il faut utiliser les balises :
<ul> et </ul> <!-- ouverture et fermeture de la balise ul (= unordered list) --> |
entre lesquelles on insère pour chaque ligne les balises :
<li> et </li> <!-- ouverture et fermeture de la balise li (= list item) --> |
Un exemple :
<ul> <li>une première puce</li> <li>une deuxième puce</li> </ul> |
Sur ce blog, les puces sont affichées :
- une première puce
- une deuxième puce
Par défaut, le code saisi (en haut) affiche les puces ainsi (en bas) :
Liste non ordonnée avec deux niveaux
On utilise les mêmes balises que précédemment, en imbriquant un deuxième niveau.
Un exemple :
<ul> <li>puce de premier niveau</li> <li>puce de premier niveau <!--ne pas fermer la balise li --> <ul> <!-- ouverture de la balise de deuxième niveau --> <li>puce de deuxième niveau</li> <li>puce de deuxième niveau</li> </ul> <!-- fermeture de la balise de deuxième niveau --> </li> <!-- fermeture de la balise de premier niveau laissée ouverte précédemment --> </ul> |
Sur ce blog, les puces sont affichées ainsi :
- puce de premier niveau
- puce de premier niveau
- puce de deuxième niveau
- puce de deuxième niveau
Par défaut, le code saisi (en haut) affiche les puces ainsi (en bas) :
Listes ordonnées
Le principe est le même, au lieu d’utiliser la balise
<ul> on utilise la balise <ol> (= ordered list) |
On utilise donc les balises :
<ol> et </ol> <!-- ouverture et fermeture de la balise ol (= ordered list) --> |
entre lesquelles on insère pour chaque ligne les balises :
<li> et </li> <!-- ouverture et fermeture de la balise li (= list item) --> |
Un exemple :
<ol> <!-- ouverture de la balise ol --> <li>une première puce</li> <li>une deuxième puce</li> </ol> <!-- fermeture de la balise ol --> |
Ce code affiche :
- une première puce
- une deuxième puce
Listes ordonnées à deux niveaux
Un premier exemple :
Voici une liste ordonnée avec un premier niveau numérique et un deuxième niveau avec des lettres minuscules.
Le principe est le même que pour les listes non ordonnées, il ne faut pas fermer la dernière balise du premier niveau avant d’ouvrir le second niveau.
Par défaut, le code saisi (en haut) affiche les puces ainsi (en bas) :
Un autre exemple :
Voici une liste ordonnée avec un premier niveau numérique et un deuxième niveau avec des lettres majuscules :
Par défaut, le code saisi (en haut) affiche les puces ainsi (en bas) :
Ecrit par Lise - Site
Bonjour,
Je souhaiterais faire une liste (sous Word-press) sans que les puces (boules noirs) soient visibles.
Est-ce possible ?
D’avance, je vous remercie
Pour modifier les puces, j’ai modifié le fichier CSS de mon thème, j’en donne un exemple sur la page dKret : créer une feuille de style dans le paragraphe « Style de puce ». Un des moyens de ne pas faire apparaître de puce, si votre thème le permet, est de renvoyer vers une image de la même couleur que le fond, à moins de mettre « background » à transparent.
C’est un peu « bidouillage » ; sinon, il faut jouer sur les marges, un exemple se trouve par exemple ici.
C’est normal, ce n’est pas dû à la phrase intercalée.
L’informatique, c’est bête 😉 ça ne fait que ce qu’on lui demande ! Ici, on lui indique un premier niveau, le premier niveau s’affiche !
Et on ne peut pas avoir de deuxième niveau, si on n’a pas le premier… Il n’y a pas de 2ème étage sans le premier 😉
Merci beaucoup pour la réponse super rapide (pas moyen de répondre avant aujourd’hui).
Oui j’avais essayer ça le problème étant le puce de premier niveau devant celle deux deuxième niveau, c’est pas le top 🙁 (le premier {li} après la phrase intercalée, je pense).
Merci quand même !
Voilà ce que je viens de tester [remplacer les ‘<' par des '(' et les '>‘ par des ‘)’
(ul)
(li)1ère puce(/li)
(/ul)
phrase intercalée
(ul) (li)
(ul)
(li)2ème niveau(/li)
(li)2ème niveau(/li)
(/ul)
(/li)
(/ul)
phrase intercalée
Bonjour,
super intéressant comme article, petite question quand même est il possible d’intercaler une phrase dans les ul exemple :
– premier niveau :
phrase (hors du premier niveau)…………………
=>deuxième niveau
=>deuxième niveau
je crois que j’ai un peu tout essayé, mais rien n’y fait (je suis sous wordpress, si ça change quelque chose)
Merci !
Comme je l’ai écrit, j’ai rédigé ce billet pour des collègues, et apparemment, mes explications sont claires, même pour des non informaticiens 😉
Je me suis contentée de « bleuir » celles de Jörn !
Rappel sur les listes et leurs styles bien intéressant 🙂
Je vais me pencher sur la personnalisation des listes et puces sur mon blog. J’ai trouvé des icones « flèche » intéressantes sur Iconfinder – Icon search made easy! 🙂
Biz @ peluche…