Personnalisez une liste HTML en CSS

Personnalisez une liste HTML en CSS
MC: liste html

Les listes HTML, aussi appelées listes à puces, sont très couramment employées sur le web. Sémantiquement, elles indiquent une collection d’élément, ce qui se retrouve dans de nombreux cas de figures, que ce soit dans le design ou le contenu : liste de commentateurs, étapes de fabrication de votre produit, liste de produits à vendre, liste de blogs amis, entrées du menu de navigation…

Ni block, ni inline

Une liste HTML est un élément de type « list-item », et non de type « block » comme on le croit souvent. Elle possède les propriétés des éléments « block » comme « width » (la largeur), « height » (la hauteur), « text-align » (alignement du texte)… mais aussi des propriétés spécifiques.

Lesquelles ?

C’est ce que nous allons voir maintenant.

Puce carré ou puce ronde ?

HTML

<ul>
	<li>Pomme</li>
	<li>Banane</li>
	<li>Citron</li>
</ul>

Tous les exemples de cet article sont basés sur cette liste HTML.

CSS

ul li{
	list-style-type: square;				/* style de la puce */
	list-style-position : inside; 			/* position de la puce */
}

Résultat

  • Pomme
  • Banane
  • Citron

J’ai volontairement rajouté une couleur de fond sur les éléments « li » afin que vous voyez bien la différence entre une position « inside » et « outside ».

Voyons un autre exemple, avec la position « outside ».

CSS

ul li{
	list-style-type: square;				/* style de la puce */
	list-style-position : outside; 			/* position de la puce */
}

Résultat

  • Pomme
  • Banane
  • Citron

Voyons un autre exemple, avec une puce « circle ».

CSS

ul li{
	list-style-type: circle;				/* style de la puce */
	list-style-position : outside; 			/* position de la puce */
}

Résultat

  • Pomme
  • Banane
  • Citron

Vous voyez, ce n’est vraiment pas compliqué de jouer avec ces propriétés.

Combien de types de puce existe-t-il ?

Pour connaître les valeurs possibles de « type » de puce, vous pouvez consulter la liste complète des propriétés CSS sur le site du Zéro.

Pour ceux qui veulent avoir une vue d’ensemble en format A4, voici deux documents à télécharger. Ils datent de 2010, donc ne sont pas tout-à-fait à jour, mais c’est amplement suffisant pour commencer.

Enfin, la solution la plus pratique quand on manipule souvent CSS : les fameux Mémento de Raphaël Goetter (encore lui). Ces livrets sont l’équivalent d’un format A4 plié en 4 dans la longueur pour donner un « triptyque à 4 volets », et coûtent moins de 5€ chacun.

J’espère que cette présentation vous a mis en appétit. La semaine prochaine, nous verrons les deux méthodes pour utiliser une image comme puce sur une liste HTML.

CSS, débutant, HTML, tutoriel

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

1 Commentaire

  1. Bonsoir Marie-Ève,

    Avant d’affronter ses deux langages diférents l’un de l’autre, cela demande de se conformer à tous les préparatifs nécessaires pour être prêt à rédiger sa première page HTML en retournant sur le site du Zéro.

    Deux choses essentielles sont à retenir: 1° HTML permet de dire quel est le contenu de la page, et si le contenu est un titre, du texte, une citation etc… 2° Le CSS lui, permet de mettre en forme ce texte: on pourra donc lui dire de s’aligner à droite, d’être écrit en vert sur fond bleu etc etc…

    Alors, je m’y intéresse et bonne pratique!

    Réal

    Répondre

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint