19 janvier 2010

Titre et date dans une même image de fond

Le titre et la date d'un article peuvent avoir chacun une image de fond. On peut aussi les afficher ensemble dans une même image.

head

exemple d'une seule image de fond
pour la date et le titre d'un article

 

Voici la marche à suivre :

1- Créer une image suffisamment haute et de la largeur voulue. Pour connaître cette dernière il suffit de faire une petite soustraction avec les propriétés width (largeur) de content et padding (marge intérieure) de blogbody :

#content {
          width: 650px;
}
.blogbody {
          padding: 10px;
}

Dans cet exemple, la largeur est de 650 - 20 = 630 pixels.

titdat_art01

image de fond pour le titre et la date

 

2- Ajouter l'affichage de cette image dans les sélecteurs blogbody h2 (date) et blogbody h3 (titre). Cadrer cette image en haut (top) et au centre (center) pour la date et en bas (bottom) et au centre pour le titre :

.blogbody h2 {
          background: url(URL de l'image) top center no-repeat;
}
.blogbody h3 {
          background: url(URL de l'image) bottom center no-repeat;
}

3- Régler les marges externes (margin) de ces deux éléments pour qu'ils soient contigus en hauteur :

.blogbody h2 {
          margin-bottom: 0;
}
.blogbody h3 {
          margin-top: 0;
}

4- Ce qui donne au final :

.blogbody h2 {
          background: url(URL de l'image) top center no-repeat;
          margin-bottom: 0;
}
.blogbody h3 {
          background: url(URL de l'image) bottom center no-repeat;
          margin-top: 0;
}

* *
*

L'astuce consiste donc à utiliser :
- la même image dans les deux sélecteurs ;
- à ajuster ces deux parties d'image pour en reconstituer une seule.

Posté par Michal53 à 08:56 - - Permalien [#]
Tags : , , , , , , ,