Utiliser une image sur une liste HTML

Utiliser une image sur une liste HTML

L’idéal pour personnaliser une liste HTML serait de pouvoir utiliser sa propre image à la place de la puce. C’est un besoin très répandu qui amène de mauvaises pratiques chez certains webmasters.

Pourtant, il préférable de connaître la façon « académique » de faire, cela vous fera gagner beaucoup de temps.

Quand on ne sait pas comment faire, la méthode la plus évidente semble être de mettre une image (balise html « img ») directement dans le code html, plus précisément au début de chaque élément « li » de la liste. Pour ce faire, vous devez importer votre image via votre gestionnaire d’image (si vous utilisez un CMS) ou via FTP.

Ensuite vous devez écrire la balise « img », renseigner sa source, ou faire tout cela via votre gestionnaire d’image.

ET si je vous disais que vous pourriez automatiser l’affichage des images une bonne fois pour toute ?

Il s’agit là du grand avantage d’utiliser CSS : l’automatisation. En plus de vous économiser du temps, cela garantie également l’homogénéité entre vos articles.

Imaginons que vous voulez que vos listes à puces ressemblent toujours à ça :

  • Pomme
  • Banane
  • Citron

La méthode académique super rapide

HTML

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

CSS

ul li{
	list-style-type: circle;							/* style de la puce */
	list-style-position : inside; 						/* position de la puce */
	list-style-image: url("triangle-jaune-petit.png");	/* image de la puce */
}

Vous remarquez que j’ai quand même indiqué un type de puce. Pourquoi ?

Au-cas-où le chemin vers l’image serait erroné ! N’oubliez jamais qu’une image peut ne pas être téléchargée.

Le chemin vers l’image est relatif, dans cet exemple, mon image est située dans le même dossier que le fichier CSS.

Automatisation

Le plus beau avec cette méthode, C’est que vous n’avez qu’à modifier une seule fois votre fichier CSS et toutes vos listes HTML seront automatiquement décorées de la même manière.

Pour restreindre ce style aux listes de vos articles uniquement, ciblez les éléments en incluant le parent HTML qui correspond aux articles. Si votre blog est en HTML5, il y a fort à parier que vos articles sont dans un élément « article ». Sinon, regardez dans le code source de votre thème.

article ul li{
	/* ici le style css qui ne s'appliquera qu'aux listes contenues dans un élément "article" */
}

Une autre façon de styler une liste HTML en CSS

Une autre technique consiste à mettre l’image en fond de l’élément « li » via la propriété « background ». On agit donc comme si on avait affaire à un élément de type « block », au lieu d’un élément « list-item ».

Le gros avantage de cette technique, et c’est pour cela que certains l’emploient, et de pouvoir placer très précisément l’image. En effet, les images de fond se positionnent avec la propriété « background-position » dont l’unité est le pixel. La précision est donc tout autre que ‘inside’ et ‘outside’!

Les inconvénients ne sont pas des moindres. Tout d’abord, il faut supprimer la puce classique (list-style-type : none;). Attention, cette astuce cache la puce mais le navigateur conserve la place qui lui était réservée. Il faudra donc jouer avec les margins et les paddings, voire même avec la hauteur de la ligne, pour avoir le résultat souhaité.

Je ne vais pas illustrer cet exemple réservé aux utilisateurs plus expérimentés, afin d’éviter la confusion.

Où trouver des images pour décorer une liste HTML

Cet article m’a été inspiré par Yvon, du blog copywriting-pratique.com, qui a proposé à ses abonnés une quantité non-négligeable d’images pour décorer leur liste HTML.

Si vous ne connaissez pas ce blog (c’est que vous êtes nouveau par ici, car j’en parle souvent!), je vous conseille une petite visite. Yvon ferme certains de ses articles aux non-membres et réserve de nombreuses ressources à ses abonnés. Inscrivez-vous, c’est gratuit!

J’en profite pour introduire cette idée : que penseriez-vous d’un espace membre sur ce blog? J’entends par là un espace réservé (gratuit) dans lequel vous pourrez télécharger à volonté de nombreuses ressources, notamment des tutoriels vidéos, des images, des bouts de code « prêt-à-utiliser », des retranscriptions audio des articles (pour les écouter en voiture)…

Qu’est-ce qui vous ferait plaisir ?

astuces, CSS, image pour liste à puces, image pour liste html, webmaster

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]

4 commentaires

  1. Bonjour Marie-Ève,

    En relation avec la publication complète de cet article, je désirerais commencer à faire de petits exercices en CSS au fil du temps afin d’être un jour capable d’écrire ce dit langage essentiel et de pouvoir aussi l’utiliser en tout temps.

    À propos, aurais-tu un cours, tuto ou des exercices faciles à me conseiller pour me familiariser sans faute avec le CSS?

    À force de faire des exercices, je réussirai par écrire le CSS qui me fera gagner beaucoup de pertes de temps pour l’entreprise….

    Merci pour votre assistance Marie-Ève!

    Réal

    Répondre
    • Bonjour Réal,

      Je ne propose rien moi-même (pour l’instant). J’ai prévu de donner des exercices à réaliser un peu plus tard…mais puisque tu en demandes, je vais peut-être les publier plus tôt que prévu. Reste à l’écoute!

      En attendant, tu peux acheter le livre que je recommande dans cet article :
      http://lesdoigtsdanslenet.com/ouvrage-de-reference-pour-apprendre-css/
      Mais je te préviens, c’est plutôt de la théorie…

      Sinon il te reste le site du zéro (cherche sur Google), je pense tu trouveras ton bonheur!

      Répondre
  2. Bonjour Marie-Eve,
    Ton article tombe à pic car je me demandais comment changer l’apparence de mes puces.
    Je me débrouille en html par contre je ne me suis jamais intéressé au css.
    Merci pour cet article et également pour le lien du site d’Yvon ( je ne suis jamais tombé sur son article proposant les images )

    Manuel

    Répondre
    • Tu vas voir que le CSS, ce n’est pas si compliqué pour des choses simples. C’est un coup à prendre, comme pour beaucoup de choses!

      Savais-tu qu’en tant que membre, tu peux retrouver toutes les ressources (ou en tout cas une grande partie) qu’Yvon propose dans ses articles ? Il suffit de faire un tour dans ton espace membre. 😉 Je trouve ça vraiment chouette d’avoir tout sous la main, si bien que je pense à faire la même chose ici…

      Répondre

Trackbacks/Pingbacks

  1. Les Doigts dans le Web #4 : les icônes - Les Doigts dans le Net - [...] Utiliser une image sur une liste HTML [...]
  2. Massacrez-vous votre référencement ? Vérifiez que vous ne vous tirez pas une balle dans le pied ! |Miss SEO Girl - […] Décorez-les comme vous voulez, CSS est fait pour ça ! […]

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