-
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;
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 !
Tags : liens, liens personnalisés
-
Commentaires
Aucun commentaire pour le moment
Suivre le flux RSS des commentaires
Vous devez être connecté pour commenter