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;  

#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;
    width: 96%;
    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;
    color: white;
    text-shadow: 1px 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 !