[Resolu] Problème liens et images

J'ai un problème avec la personnalisation de me liens.

Je souhaite afficher une petite icone devant mes liens pour bien montrer que ce sont des liens cliquables. Ma petite icone est une fleche de 5px par 5px.

J'ai donc personnalisé mes liens ainsi :

a:link
{
	color: #0B0061;
	text-decoration:none;
	background-image:url(puce.gif);
	background-repeat:no-repeat;
	background-position:0px;
	padding-left:10px;
}
a:visited
{
	color: #0B0061;
	text-decoration:none;
	background-image:url(puce.gif);
	background-repeat:no-repeat;
	background-position:0px;
	padding-left:10px;
}
a:hover
{
	color:#0B0061;
	text-decoration:underline;
	background-image:url(puce.gif);
	background-repeat:no-repeat;
	background-position:0px;
	padding-left:10px;
}

Cela affiche donc ma petite flèche devant mes liens. L'effet fonctionne très bien et ça me plait. Le problème est que cet effet est aussi appliqué à toutes les images, ce que je ne veux pas puisque c'est pas très joli.
En personnalisant ma balise "a img", cela ne change rien, ma petite flèche apparait devant toutes mes images cliquables !

a img
{
	padding:0px;
	background:none;
}

a:link img
{
	padding:0px;
	background:none;
}
a:visited img
{
	padding:0px;
	background:none;
}
a:hover img
{
	padding:0px;
	background:none;
}

Savez-vous commet régler ce problème (sous IE et firefox) ?
Modifié par illogical (08 Jun 2008 - 17:11)

Bonjour,

Pour commencer, tu pourrais simplifier grandement ton code!

a {
	color: #0B0061;
	text-decoration: none;
	background: url(puce.gif) no-repeat;
	padding-left: 10px;
}
a:hover, a:focus {
	text-decoration:underline;
}
a img {
	padding: 0;
	background: none;
}

Voilà. Ce code est strictement équivalent a celui que tu as posté dans ton message. (Sauf pour le style au focus, que j'ai rajouté.)

Ensuite, le problème lui-même: ton «correctif» pour les images s'applique aux images qui sont dans des liens. C'est très bien pour éviter les bordures autour des images à l'intérieur des liens (que certains navigateurs affichent par défaut) via un a img {border: none;}, mais il faut bien comprendre que ce style s'applique à l'image et non pas au lien qui la contient.

Ce qu'il faudrait, c'est adresser les déclarations CSS padding: 0 et background: none au lien contenant l'image, et non pas à l'image elle-même. Problème: aucun sélecteur CSS ne permet de viser un élément qui contiendrait tel autre élément. Ça marche dans un sens (en descendant l'arbre du document), mais pas dans l'autre (en le remontant).

Tu as donc deux solutions:
1. ne pas appliquer cette image de fond (et le padding qui va avec) à tous les liens de la page, mais seulement à certains liens;
2. appliquer l'image de fond à tous les liens, et créer un style pour ceux qui ne doivent pas avoir d'image de fond.

Quelle que soit la solution choisie, il faudra travailler avec une classe sur les liens, ou bien en visant tous les liens contenus dans tel ou tel bloc, ou les deux à la fois pour plus de souplesse. À toi de tester des solutions.


Pour post-scriptum, une petite règle d'étiquette: quand on ouvre une discussion, on dit «Bonjour», «Bonjour à tous», ou quelque chose du genre. Simple question de politesse.
Modifié par Florent V. (07 Jun 2008 - 18:06)

Bonjour,

Merci pour la simplification apportée tout d'abord.
Effectivement, la modification doit s'affectuer sur le lien et non pas sur l'image, ce qui est impossible, et grandement dommage.
Je me vois mal appliquer une classe à tous mes liens images. Tant pis je vais renoncer à ce truc.
Dois-je indiquer ce sujet comme résolu ?
Désolé de ne pas avoir dit bonjour.

illogical a écrit :
Dois-je indiquer ce sujet comme résolu ?

Oui. Il faut éditer le premier message du sujet, et rajouter «[Résolu]» à la minimine dedans.

a écrit :
Oui. Il faut éditer le premier message du sujet, et rajouter «[Résolu]» à la minimine dedans.

à la minimine?
Modifié par Hermann (08 Jun 2008 - 18:34)