 |
Forum |
|
|
Réagissez
dans les forums de JDN Développeurs
|
Voici comment remplacer les puces habituelles des listes par un petit graphique
personnalisé, tout en respectant la sémantique des balises, grâce
aux feuilles de style et à leur capacité à utiliser des fichiers
d'images, simplement en définissant liste-style-image:
Comme pour modifier
l'image d'un bouton input en CSS, cela ne marche pas pour les navigateurs
trop anciens, qui afficheront directement les puces normales... à condition
de préciser le type de cette puce dans la feuille...
- one for the money
- two for the show
- three to get ready
- now go, cat, go!
Le code
<style>
UL { list-style-image:url(http://www.journaldunet.com/developpeur/image/gen/flecher.gif);
list-style-type: circle;
}
</style>
<ul>
<li>one for the money</li>
<li>two for the show</li>
<li>three to get ready</li>
<li>now go, cat, go!</li>
</ul>
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
