Différencier les liens sur des textes des liens sur des images.

Bonjour,
J'ai défini un style pour les liens :

a:hover{
	border-bottom:dotted 1px;
}

Ainsi qu'un style pour les images :

img{
	border: 0;
}

Pour la partie html , la voila :

<p><a href="mapage2.html">Mon lien texte.</a></p>
<p><a href="mapage2.html"><img src="start.jpg" width="79" height="78" /></a></p>

[/code]

Le problème est qu'au survol de l'image, celle-ci apparait avec la bordure en dotted alors que je veux donner une valeur nulle..

Comment faire pour éviter l'utilisation des classes sachant que tous les liens textes seront en dotted et les image sans style.

Merci,
olivier
Modifié par olivier_nice (13 Aug 2009 - 15:12)

Bonjour,

Tu peux utiliser "a img" :

img, a img{
  border: 0;
}

J'ai essayé mais rien n'y fait malheuresement...

Voici une page de test en ligne ça donne une meilleure idée du problème:
http://exp.activeeon.com/liens.html

Bonjour olivier_nice,

Sur ta page de test, j'ai essayé de remédier à ton problème en utilisant quelques propriétés et règles CSS par l'intermédiaire de Firebug et, pour être honnête je ne vois pas comment tu pourrais pallier ton problème sans l'utilisation de classes.

Laurie-Anne a écrit :
Bonjour,

Tu peux utiliser "a img" :

img, a img{
  border: 0;
}

Sauf que la le border est sur le <a>... pas sur l'<img> qui est dans le <a>...

Une solution serait peut-être de mettre le border sur un élément qui serait aussi dans le a

a:hover span {
    border: dotted, 1px;
}

<a><span>truc avec des petits points autour</span></a>
<a><img alt="img sans petits points autour"/></a>

Modifié par Nathan- (13 Aug 2009 - 15:50)

Merci d'avoir essayé, je vais sans doute faire un simple underline au lieu du dotted.