De meme, pour avoir une petite image qui enjolive les titres de vos articles, vous pouvez modifier le .titreArticle :
.titreArticle{
color: #EEAD0E;
text-decoration:none;
background:
url(http://idata.over-blog.com/0/05/85/46/deco-titre.gif)
no-repeat scroll bottom left ;
padding-left: [largeur de l'image]px;
padding-top : [hauteur de l'image]px;
}
Il faut alors jouer sur le padding pour positionner correctement le titre par rapport a l'image; c'est-a-dire, decaller le contenu de .titreArticle, en l'occurence, le texte, de la largeur de l'image vers la gauche (puisque l'image est positionnee a gauche par l'attribut left ) et de la hauteur de l'image vers le bas (donc on ajoute une marge en haut : padding-top, si, si, c'est logique, je vous assure), pour que l'image puisse apparaitre en entier.
Celle-ci, etant en background, n'est pas affectee par le padding, et se trouve donc en bas a gauche du cadre (invisible car il n'y a pas de border) de .titreArticle et le texte se trouve juste a cote d'elle .
.titreArticle{
color: #EEAD0E;
text-decoration:none;
background:
url(http://idata.over-blog.com/0/05/85/46/deco-titre.gif)
no-repeat scroll bottom left ;
padding-left: [largeur de l'image]px;
padding-top : [hauteur de l'image]px;
}
Il faut alors jouer sur le padding pour positionner correctement le titre par rapport a l'image; c'est-a-dire, decaller le contenu de .titreArticle, en l'occurence, le texte, de la largeur de l'image vers la gauche (puisque l'image est positionnee a gauche par l'attribut left ) et de la hauteur de l'image vers le bas (donc on ajoute une marge en haut : padding-top, si, si, c'est logique, je vous assure), pour que l'image puisse apparaitre en entier.
Celle-ci, etant en background, n'est pas affectee par le padding, et se trouve donc en bas a gauche du cadre (invisible car il n'y a pas de border) de .titreArticle et le texte se trouve juste a cote d'elle .
par Zoélie
publié dans :
TIP's












