-
Les jolies puces !
Vous voulez ajouter une puce devant les éléments de vos listes dans vos modules derniers articles ou liens ou autres...
1. Pour une puce, on va dire standard c'est à dire avec les valeursdisc : gros point circle : cercle creux ou square : petit carré
On utilise la propriété CSS list-style-type
list-style-type: disk ; list-style-type: circle; list-style-type: square; - Image en Fond de blog extensible
- Curseur perso survol image lien
- CSS, and JavaScript code editor in your browser with
- other people's creations. A place to troubleshoot, to teach, to learn, to test
list-style-type: upper-roman; - Pour afficher des puces identiques à toutes les listes des modules du menu1 ( ou menu2), on ajoute dans le CSS
#menu1 .module_menu_contenu ul{
list-style-position: inside; /*la puce interieur element*/
list-style-type: circle;/ *style de puce*/}- Pour un module de menu latéral en particulier , on ajoutera dans le CSS, en fonction de son numéro
#module_menuXXXXXXXXX ul {
list-style-position: inside;
list-style-type: circle;
}Les limites :
- Peu de choix de puces
- On ne peut pas donner de couleur particulière aux puces.
2. Les puces image :Avec la propriété list-style-image
Un exemple:Même principe que pour les puces standard, on récupère le numéro du module et on ajoute dans le CSS:
#module_menuXXXXXXXXX ul {
list-style-image : url(http://ekladata.com/KOd11Z-v2x1vsndC0dXZWtWz4iw.gif);
}Une page avec quelques images de puces ici
3. Les puces caractères spéciauxGrace au pseudo élément :before, il est possible d'insérer un caractère en début d'item de liste (li) ainsi:
#module_menuXXXXXXXXX li:before {
content: "■ "; /* caractère UTF-8 */
color:white; /*couleur du caractere*/}quelques caractères spéciaux avec la touche Alt:
Alt + 1 ☺
Alt + 3 ♥
Alt + 15 ☼
Alt + 14 ♫
Alt + 6 ♠
Alt + 254 ■
Alt + 10 ◙
Alt + 16 ►
Alt + 26 →
Alt + 35 #
Alt+ 22 ▬
Alt + 8 ◘
Pour trouver tout seul son numéro de module:
http://bleulezard.eklablog.com/examiner-un-element-de-la-page-et-trouver-son-selecteur-a80512900
Tags : puces
-
Commentaires
Ajouter un commentaire
Bonsoir mille merci pour ces belles astuces
bonne soirée à vous
petitefleur72700