• 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 valeurs 

    disc : 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;       
    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éciaux

    Grace 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

     

     

     

    « Édition de module de liens, bouton "titre"Images dans les commentaires »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Lundi 4 Septembre 2023 à 19:34

    Bonsoir mille merci pour ces belles astuces 

    bonne soirée à vous 

    petitefleur72700



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl