22 décembre 2009

Un séparateur d'articles

Cet article est devenu obsolète avec les modifications apportées par Canalblog fin 2012. Reportez-vous plutôt à l'article "Ajouter un séparateur d'articles" qui propose une astuce bien plus souple.

Il peut être intéressant de séparer les articles autrement qu'avec un simple trait. On peut afficher une petite image qui va davantage personnaliser le blog. C'est sous les commentaires que l'on va l'insérer.
Le sélecteur correspondant aux commentaires est "blogbody .itemfooter".

La hauteur de cette zone dépend de la fonte, de sa taille et de la largeur de la colonne de texte (les tags de l'article étant écrits les uns à la suite des autres).

divider_art01

la hauteur de ces commentaires est de 70px

Pour insérer une image dans cette zone, il faut d'abord l'agrandir dans le sens de la hauteur.
Par exemple, pour une image de 57px de haut on ajoutera 57px, soit au total ici : 70px + 57px = 127px.
Dans le sélecteur on insèrera la mention suivante :

 

.blogbody .itemfooter {
          height: 127px;
}

 

 

 

divider_art02
hauteur de 127px

 

On ajoutera ensuite l'image de fond dans le sélecteur. Elle sera placée en bas (bottom) et au centre (center) de la zone et on veillera à ce qu'elle ne soit pas répétée (no-repeat).

 

.blogbody .itemfooter {
          height: 127px;
          background: url(URL de l'image) bottom center no-repeat;
}

 

 

 

divider_art03
ajout de l'image

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