Les styles de puces en html

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) :

Puces

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) :

Puces

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 :

  1. une première puce
  2. 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) :

Puces

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) :

Puces


Ecrit par Lise - Site

8 commentaires

Ecrire un commentaire»
  1. 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…

  2. Rappel sur les listes et leurs styles bien intéressant

    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 ;-)

    J’ai trouvé des icones “flèche” intéressantes

    Je me suis contentée de « bleuir » celles de Jörn !

  3. matinciel

    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 !

  4. 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)

    • 1ère puce

    phrase intercalée

      • 2ème niveau
      • 2ème niveau
  5. matinciel

    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 !

  6. 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 ;-)

  7. 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

    1. 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.

Laisser un commentaire

Votre adresse mail ne sera jamais rendue publique ni utilisée.

*Si vous écrivez un commentaire ici pour la première fois, celui-ci ne sera publié qu'après validation par un administrateur du blog. Ne l'envoyez pas plusieurs fois !
*Bien sûr, tout commentaire injurieux, publicitaire ou spam sera supprimé.
*C'est à vous maintenant !

(obligatoire)
(obligatoire)

Laisser ces deux champs tels quels :

Protégé par Invisible Defender.


  • Mentions légales
    Les différents éléments du Blog de Lise restent la propriété de leur(s) auteur(s) respectifs.


Connexion à WordPress protégée par Clef