29 décembre 2009

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.

titre_art02

titres_art01

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 :

titre_art03



Nota :
Comme cette manipulation affecte tous les titres du menu, veiller à ce que ceux-ci s'affichent sur une seule ligne.

Posté par Michal53 à 09:13 - - Permalien [#]
Tags : , , , , , ,