Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Bote outils

Une image en guise de puce

En HTML, les choix sont trs limits 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 prs tout !

Mais saviez-vous qu'il est possible d'utiliser un graphique en guise de puce? Voici deux mthodes 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 tlcharger sur le web; si vous disposez d'un logiciel de graphisme, vous pouvez crer votre propre gif. Pour cette dmo, j'ai cr les gifs suivants :

Premire mthode :

Pour obtenir ce rsultat,...

  Premier lment de la liste
  Second lment de la liste
  Troisime lment. 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 rsultat ne vous drange pas, alors cette mthode est parfaite. Sinon, il faut utiliser la seconde mthode (voir ci-dessous).

... utiliser ce code :

<DL>
<DD><IMG SRC=
"puce1.gif">&nbsp;&nbsp;Premier lment de la liste</DD>
<DD><IMG SRC=
"puce1.gif">&nbsp;&nbsp;Second lment de la liste</DD>
<DD><IMG SRC=
"puce1.gif">&nbsp;&nbsp;Troisime lment. 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 rsultat ne vous drange pas, alors cette mthode est parfaite. Sinon, il faut utiliser la <a href="#Methode2">seconde mthode</a> (voir ci-dessous).</DD>
</DL>

 Vous pouvez galement utiliser une puce diffrente pour chaque lment de la liste :

  Premier lment de la liste
  Second lment de la liste
  Troisime lment. 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 mthode convient lorsque les lignes pour chaque lment sont trs courtes. Sinon, il faut utiliser la seconde mthode (voir ci-dessous).

Voici le code correspondant l'exemple ci-dessus :

<DL>
<DD><IMG SRC=
"puce1.gif">&nbsp;&nbsp;Premier lment de la liste</DD>
<DD><IMG SRC=
"puce2.gif">&nbsp;&nbsp;Second lment de la liste</DD>
<DD><IMG SRC=
"puce3.gif">&nbsp;&nbsp;Troisime lment. 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 rsultat ne vous drange pas, alors cette mthode est parfaite. Sinon, il faut utiliser la <a href="#Methode2">seconde mthode</a> (voir ci-dessous).</DD>
</DL>

 

Seconde mthode :

Elle consiste "tricher" en utilisant un tableau de deux colonnes qui permet d'aligner parfaitement les paragraphes de texte; dans ce cas, la premire 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 lment de la liste
Second lment de la liste
Troisime lment. 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 dbut de la premire ligne de sa cellule. Ceci donne un rsultat 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 lment 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 lment 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%">Troisime lment. 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 dbut de la premire ligne de sa cellule. Ceci donne un rsultat un peu plus &quot;professionnel&quot;&nbsp;</td>
</tr>
</table>


Le mme tableau avec une puce diffrente pour chaque lment de la liste :

 

Premier lment de la liste
Second lment de la liste
Troisime lment. 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 dbut de la premire ligne de sa cellule. Ceci donne un rsultat 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 lment 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 lment 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%">Troisime lment. 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 dbut de la premire ligne de sa cellule. Ceci donne un rsultat un peu plus &quot;professionnel&quot;&nbsp;</td>
</tr>
</table>

 

Voil ! Si ce n'est pas clair ou si vous avez besoin de prcisions, n'hsitez pas me contacter.

  
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011