CSS 1

noreply@blogspirit.com () — Sun, 19 Feb 2006 20:35:00 +0100

Des liens à images changeantes

Est-ce que c'est facile ? Oui et non.

Oui parce que après tout, il suffit de les installer en background. Non, parce qu'il y a un risque, c'est de les installer de partout et même dans la barre violette faisant un lien vers blogspirit. Que faut-il faire ?

Dans les liens en-dessous des articles, pour répondre très explicitement à la question de "j'dis tout", il faut attrobuer ces backgrounds à : .content p.posted a:link cette ligne n'existe pas dans la CSS par défault de blogspirit : il faut la rajouter. Pourquoi ce nom de barbare ? (parce que là est toute l'astuce). Dans la CSS, a:link correspond à un lien. Seulement, on ne veut pas que ce background soit à attribué à n'importe quel lien, donc, on spécifie les liens de quelle partie, soit content p.posted.

Une fois l'image sélectionnée mise en bakground (no-repeat de préférence), il ne faut pas oublier d'agrandir le padding afin qu'elle s'affiche en entier. Par exemple pour mes liens de commentaire ça donne :

.content p.posted a:link{
background: url(http://glu-glu-2ndtime.blogspirit.com/images/ajouteruncomm.gif) no-repeat left;
padding-left: 50px;
padding-top: 50px;
padding-bottom:50px;
margin-top: 10px;
margin-bottom: 30px;
}

Les margins sont là pour éviter que les liens empiètent les uns sur les autres. Après plus de secrets : on veut que l'image change au survol de la souris ? .content p.posted a:hover Qu'il soit différent lorsqu'on les a visités ? .content p.posted a:visited . En théorie, je n'ai pas testé, ça marche pour tout.

Si vous avez des questions, n'hésitez pas à poster des commentaires, je me ferais un plaisir de vous répondre.

Le prochain article portera sur les barres de séparation.

Le blog d'une folle dingue: seconde édition - ameliorez_vos_blogs

CSS 1