|
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"> Premier
élément de la liste</DD>
<DD><IMG SRC="puce1.gif"> Second
élément de la liste</DD>
<DD><IMG SRC="puce1.gif"> 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"> Premier
élément de la liste</DD>
<DD><IMG SRC="puce2.gif"> Second
élément de la liste</DD>
<DD><IMG SRC="puce3.gif"> 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 "professionnel" </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 "professionnel" </td>
</tr>
</table>
Voilà ! Si ce n'est pas clair ou si vous avez besoin de précisions,
n'hésitez pas à me contacter.
|
