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.

Pour en apprendre plus sur le HTML CSS je vous conseil cette article ici.

Laisser un commentaire

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