• Fond des liens

      

     

    Je ne sais pas comment appeler ça...^^ bref, les images parlent d'elle-même (image 2, au survol). Il s'agit de mettre un fond derrière vos liens. Pour ceux qui me suivent depuis un petit moment, c'était mon ancien menu (thème #2). Je n'avais pas trouvé de tuto sur le forum d'ekla, j'avais donc dû me débrouiller toute seule pour faire ce genre de menu...  ici je vais vous donner les codes.

     

    I- Liens dans votre module.

    Avant de s'occuper de l'apparence de vos liens, créez-les dans un module de votre menu. Une fois fait, on passe au CSS.

     

    II- Codes CSS

    1- On commence évidemment par le sélecteur. En rouge, mettre le numéro du module. (Clique droit sur le module > inspecter) Ne pas oublier le "a" après le numéro. (le "a" est utilisé pour les liens.)

    #module_menu_contenu152016260 a { propriété: valeur; }

    2- Maintenant, les propriétés. Commencez par le plus simple, le fond que vous voulez, la police, la taille, couleur, etc. Ce qui vous donne un truc dans ce genre-là.

     

    3- Définissez une taille, pour mon exemple, mes liens font presque toute la largeur de mon module (width: 96%;).

    4- Puis utilisez: display : inline-block. La propriété display permet de modifier ou supprimer un élément et la valeur, inline-block voie l'élément comme une seule ligne. 

    #module_menu_contenu152016260 a {
          width: 96%;
         display: inline-block;}

    Si vous êtes sur Firefox et que ça ne fonctionne pas, ajoutez: display: moz-inline-box;  

    Mon code final:

    #module_menu_contenu152016260 a {
        color: white;
        font-size: 12px;
        text-align: center;
        display: inline-block;
        display: moz-inline-box;
        margin-top: 3px;
        margin-bottom: 2px;
        width96%;
        background-color: #844F8D;
        text-shadow: 1px 1px 0px #844F8D;  }

    5- Pour le survol, même chose:

    Je n'ai que le fond à changer.

    #module_menu_contenu152016260 a:hover {
        background#B48ABB;
        colorwhite;
        text-shadow1px 1px 0px  #B48ABB;}

     

    Si vous préférez faire votre menu dans une page ou un article c'est pareil, il suffit juste de changer le sélecteur.

    Voilà, j’espère que ce petit tuto vous sera utile !


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :