 |
 Personnaliser les puces des listes |
|
|
|
Connexion ratee
|
|
Marre des puces de listes noires, rondes, carrées, pleines ou vides ?
Utilisez vos propres images !! ou choisissez parmi les formes disponible en standard. |
|
|
|
|
|
Il est en effet possible de définir dans une feuille de style l'apparence des puces
qui apparaissent en regard des listes non-numérotées.
Soit vous utilisez l'une des quatre apparences disponible, soit vous utilisez votre propre fichier image.
Les apparence standard :
- list-style-type: circle : la puce prend la forme d'un cercle noir transparent au
centre,
- list-style-type: disc : la puce prend la forme d'un disque noir plein,
- list-style-type: square : la puce prend la forme d'un carré noir plein,
- list-style-type: none : la puce prend... la poudre d'escampette (elle n'apparait
pas).
Pour déclarer votre propre image :
- list-style-image: url('puce.gif') : chaque puce sera remplacée par l'image
dont vous donnez le chemin.
Il est également possible de 'modifier' la position de la puce par l'attribut 'list-style-position' :
- list-style-position: inside : la puce se place où le texte devrait démarrer et l'espace entre la puce et le texte est réduit,
- list-style-position: outside : la puce se place comme d'habitude (comportement par défaut).
Si vous déclarez une classe qui utilise ces options, seules les listes appelant cette classe l'appliqueront, mais
si vous redéfinissez l'attribut 'LI', toutes les listes appliqueront le style. Cela peut
être pratique pour homogénéiser votre site.
Attention : Netscape ne tient pas compte des définitions 'list-style-image' et 'list-style-position'.
|
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<style>
.disque { list-style-type: disc; }
.cercle { list-style-type: circle; }
.carre { list-style-type: square; }
.image1 { list-style-image: url("list-new.gif"); }
.image2 { list-style-image: url("list-red.gif"); }
.externe { list-style-position: outside; }
.interne { list-style-position: inside; }
</style>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<ul class="interne">
<li>Premier élément d'une liste d'options déclarée 'inside'...
<li>Second élément d'une liste d'options déclarée 'inside'...
</ul>
<ul class="externe">
<li>Premier élément d'une liste d'options déclarée 'outside'...
<li>Second élément d'une liste d'options déclarée 'outside'...
</ul>
<ul>
<li class="disque">Une option en forme de disque,
<li class="cercle">une option en forme de cercle,
<li class="carre">une option en forme de carré,
<li>une option standard.
</ul>
<ul class="image2">
<li>Ici une liste d'option avec une image bleue,
<li>Ici une liste d'option avec une image bleue,
<ul>
<li>une liste imbriquée sans aucun style déclaré,
<li>mais qui bénéficie de l'héritage.
</ul>
<li>Ici une liste d'option avec une image bleue.
</ul>
<ul>
<li class="image1">Une option de liste en bleu,
<li class="image2">une option de liste en rouge,
<li class="image1">une option de liste en bleu,
<li>une option 'normale', sans style,
<li class="interne">une dernière option dont l'alignement 'inside'...
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- Premier élément d'une liste d'options déclarée 'inside' assez long pour voir l'alignement gauche...
- Second élément d'une liste d'options déclarée 'inside' assez long pour voir l'alignement gauche...
- Premier élément d'une liste d'options déclarée 'outside' assez long pour voir l'alignement gauche...
- Second élément d'une liste d'options déclarée 'outside' assez long pour voir l'alignement gauche...
- Une option en forme de disque,
- une option en forme de cercle,
- une option en forme de carré,
- une option standard.
- Ici une liste d'option avec une image bleue,
- Ici une liste d'option avec une image bleue,
- une liste imbriquée sans aucun style déclaré,
- mais qui bénéficie de l'héritage.
- Ici une liste d'option avec une image bleue.
- Une option de liste en bleu,
- une option de liste en rouge,
- une option de liste en bleu,
- une option 'normale', sans style,
- une dernière option dont l'alignement 'inside' doit se différencier des options ci-dessus...
|
|
|
|
|
|
|
|
|
|
|
|
|
