Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Boîte à outils

Une image en guise de puce

En HTML, les choix sont très limités quant aux styles de puces (bullets) pour les listes :

  • Le petit rond noir
  • Le petit disque blanc
  • Le petit carré noir

... et c'est à peu près tout !

Mais saviez-vous qu'il est possible d'utiliser un graphique en guise de puce? Voici deux méthodes pour y arriver :

Mais avant tout, il faut choisir le graphique qui servira de puce; il peut s'agir d'un graphique que vous trouverez dans les nombreux sites proposant des images gratuites à télécharger sur le web; si vous disposez d'un logiciel de graphisme, vous pouvez créer votre propre gif. Pour cette démo, j'ai créé les gifs suivants :

Première méthode :

Pour obtenir ce résultat,...

  Premier élément de la liste
  Second élément de la liste
  Troisième élément. Cette ligne est plus longue que les autres. Lorsque le texte arrive en bout de ligne sur la droite, il revient à la ligne juste en-dessous de la puce. Si ce résultat ne vous dérange pas, alors cette méthode est parfaite. Sinon, il faut utiliser la seconde méthode (voir ci-dessous).

... utiliser ce code :

<DL>
<DD><IMG SRC=
"puce1.gif">&nbsp;&nbsp;Premier élément de la liste</DD>
<DD><IMG SRC=
"puce1.gif">&nbsp;&nbsp;Second élément de la liste</DD>
<DD><IMG SRC=
"puce1.gif">&nbsp;&nbsp;Troisième élément. Cette ligne est plus longue que les autres. Lorsque le texte arrive en bout de ligne sur la droite, il revient à la ligne juste en-dessous de la puce. Si ce résultat ne vous dérange pas, alors cette méthode est parfaite. Sinon, il faut utiliser la <a href="#Methode2">seconde méthode</a> (voir ci-dessous).</DD>
</DL>

 Vous pouvez également utiliser une puce différente pour chaque élément de la liste :

  Premier élément de la liste
  Second élément de la liste
  Troisième élément. Cette ligne est plus longue que les autres. Lorsque le texte arrive en bout de ligne sur la droite, il revient à la ligne juste en-dessous de la puce. Cette méthode convient lorsque les lignes pour chaque élément sont très courtes. Sinon, il faut utiliser la seconde méthode (voir ci-dessous).

Voici le code correspondant à l'exemple ci-dessus :

<DL>
<DD><IMG SRC=
"puce1.gif">&nbsp;&nbsp;Premier élément de la liste</DD>
<DD><IMG SRC=
"puce2.gif">&nbsp;&nbsp;Second élément de la liste</DD>
<DD><IMG SRC=
"puce3.gif">&nbsp;&nbsp;Troisième élément. Cette ligne est plus longue que les autres. Lorsque le texte arrive en bout de ligne sur la droite, il revient à la ligne juste en-dessous de la puce. Si ce résultat ne vous dérange pas, alors cette méthode est parfaite. Sinon, il faut utiliser la <a href="#Methode2">seconde méthode</a> (voir ci-dessous).</DD>
</DL>

 

Seconde méthode :

Elle consiste à "tricher" en utilisant un tableau de deux colonnes qui permet d'aligner parfaitement les paragraphes de texte; dans ce cas, la première colonne sur la gauche contient l'image de la puce (le gif) et le texte ira dans la colonne de droite, comme dans l'exemple ci-dessous,...

Premier élément de la liste
Second élément de la liste
Troisième élément. Cette ligne est plus longue que les autres. Lorsque le texte arrive en bout de ligne sur la droite, il revient à la ligne juste en-dessous du début de la première ligne de sa cellule. Ceci donne un résultat un peu plus "professionnel" 

... dont voici le code :

<table border="0" width="80%" cellspacing="0" cellpadding="4">
<tr>
<td width=
"5%" valign="top" align="left"><img border="0" src="puce4.gif" width="15" height="15"></td>
<td width=
"95%">Premier élément de la liste</td>
</tr>
<tr>
<td width=
"5%" valign="top" align="left"><img border="0" src="puce4.gif" width="15" height="15"></td>
<td width=
"95%">Second élément de la liste</td>
</tr>
<tr>
<td width=
"5%" valign="top" align="left"><img border="0" src="puce4.gif" width="15" height="15"></td>
<td width=
"95%">Troisième élément. Cette ligne est plus longue que les autres. Lorsque le texte arrive en bout de ligne sur la droite, il revient à la ligne juste en-dessous du début de la première ligne de sa cellule. Ceci donne un résultat un peu plus &quot;professionnel&quot;&nbsp;</td>
</tr>
</table>


Le même tableau avec une puce différente pour chaque élément de la liste :

 

Premier élément de la liste
Second élément de la liste
Troisième élément. Cette ligne est plus longue que les autres. Lorsque le texte arrive en bout de ligne sur la droite, il revient à la ligne juste en-dessous du début de la première ligne de sa cellule. Ceci donne un résultat un peu plus "professionnel" 

Voici le code correspondant à l'exemple ci-dessus :

<table border="0" width="80%" cellspacing="0" cellpadding="4">
<tr>
<td width=
"5%" valign="top" align="left"><img border="0" src="puce1.gif" width="15" height="15"></td>
<td width=
"95%">Premier élément de la liste</td>
</tr>
<tr>
<td width=
"5%" valign="top" align="left"><img border="0" src="puce2.gif" width="15" height="15"></td>
<td width=
"95%">Second élément de la liste</td>
</tr>
<tr>
<td width=
"5%" valign="top" align="left"><img border="0" src="puce3.gif" width="15" height="15"></td>
<td width=
"95%">Troisième élément. Cette ligne est plus longue que les autres. Lorsque le texte arrive en bout de ligne sur la droite, il revient à la ligne juste en-dessous du début de la première ligne de sa cellule. Ceci donne un résultat un peu plus &quot;professionnel&quot;&nbsp;</td>
</tr>
</table>

 

Voilà ! Si ce n'est pas clair ou si vous avez besoin de précisions, n'hésitez pas à me contacter.

 
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011