Une image de fond pour les titres du menu
Il peut être intéressant de mettre en valeur les titres du menu latéral. Ajouter une image de fond est une solution facile à mettre en place.
|
|
|
| sans image de fond | avec image de fond |
Voici les étapes de mise en place d'une image dans les titres du menu latéral.
1- Déterminer la largeur exacte de l'image.
Deux sélecteurs permettent de la calculer, leftbar (ou rightbar) qui donne la largeur de la colonne et navlinks qui donne la largeur de la marge intérieure :
#leftbar {
width: 200px; }
.navlinks {
padding: 10px; }
La largeur maximale de l'image sera ici de 200 - 20 = 180 px.
2- La hauteur de l'image n'est pas déterminée, on peut choisir n'importe quelle taille. Dans l'exemple, on a choisi 38 pixels.
3- Dans le sélecteur navlinks .title, ajouter l'indication de l'ajout d'une image de fond :
.navlinks .title {
background: url(URL de l'image) center center no-repeat;
}
4- Aligner verticalement le titre par rapport à l'image en utilisant la propriété line-height (qui précise la hauteur de l'interligne), lui donner la valeur de la hauteur de l'image exprimée en pixels :
.navlinks .title {
background: url(URL de l'image) center center no-repeat;
line-height: 38px;
}
5- Et enfin, ajouter (si nécessaire) une marge à gauche (padding-left) du titre :
.navlinks .title {
background: url(URL de l'image) center center no-repeat;
line-height: 38px;
padding-left: 10px;
}
Résultat final :
Nota :
Comme cette manipulation affecte tous les titres du menu, veiller à ce que ceux-ci s'affichent sur une seule ligne.
Commentaires :
- bémol ancien !C'est bien que tu abordes ce sujet, comme tu as du le remarquer depuis longtemps j'avais essayé de faire cette manip. et faute de connaissance bien sûr, tous mes titres de la colonne de droite ont bien l'image mais aussi et malheureusement le même titre ! il s'agit des Blog-amis...Pour les autres sujets ça va. Mais pour les sous-catégories d'amis j'avais voulu faire le même motif mais avec des titres différents. D'ailleurs on peut les voir (ss images) quand on se trouve dans l'écriture d'un commentaire ! J'ai jamais compris mais tu me connais, curieuse et blonde. Merci pour tes visites dans mon Salon. Bonne fin de journée Chantal
- Petites précisionsLa manip que j'explique ici permet de modifier l'aspect de tous les titres du menu. C'est ce qui se passe lorsqu'on travaille sur la feuille de style. Si l'on veut des titres différents les uns des autres, il faut travailler sur les pages HTML. Je pense que vous trouverez des articles sur le sujet chez Joëlla.
Amicalement
Michel - Je me lance....Coucou !
J'ai décidé de me lancé pour changer quelques petites choses sur mon blog...
Merci pour toutes tes conseils car j'ai déjà réussi à changer ma feuille de style (toute seul !)
Je penses que je vais malheureusement t'appeler au secours de temps en temps car je ne suis pas une pro comme toi.
A bientôt !
Bizou
Biz Cocoloko07