21 décembre 2009

Une image de fond dans le calendrier

Lorsqu'on insère une image dans un élément au moyen de la propriété "background", il n'est pas possible de spécifier des dimensions qui la réduiraient ou l'agrandiraient. L'image prend automatiquement ses dimensions propres. Si elle est trop grande, une partie seulement s'affiche, si elle est trop petite, elle est répétée pour occuper tout l'espace qui lui est réservé.

Il faut donc connaître les dimensions qui lui sont assignées.

1 - Les sélecteurs et propriétés qui déterminent la largeur du calendrier :

- la largeur de la colonne :

#leftbar {
          width: 200px;
}

ou

#rightbar {
          width: 200px;
}

- la marge intérieure du menu :

.navlinks {
          padding: 10px;
}

- la largeur relative du tableau-calendrier :

#calendar table {
          width: 100%;
}

calendar_art
une colonne de menu

Dans l'exemple ci-dessus, le calendrier occupe le maximum (100%) de la place disponible dans la colonne où se trouve le menu. La largeur du calendrier est donc de 200px - 20px = 180px.

2 - Les sélecteurs et propriétés qui déterminent la hauteur du calendrier :

Il est plus difficile de connaître avec précision la hauteur du calendrier car elle dépend de la fonte utilisée et de sa taille.

#calendar {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: small;
}
#calendar caption {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: small;
}

A titre indicatif, dans l'exemple ci-dessus, le calendrier a une hauteur de 130px.

3 - Conclusion.

Une fois connues les dimensions du calendrier, il suffit de découper une image ayant les mêmes dimensions. Il faudra l'insérer dans le sélecteur "calendar" :

#calendar {
          background: url(URL de l'image) no-repeat center center;
}

Nota :

Les heureux utilisateurs de Mozilla Firefox peuvent télécharger l'extension MeasureIt 0.3.8 qui permet d'afficher à l'écran une réglette de mesure très pratique.

bg_cal
copie écran

Posté par Michal53 à 10:20 - - Permalien [#]
Tags : , , , , , ,