Image avec lien

[Nullette]

Bonjour/bonsoir,

dans ma feuille de style j'ai le code suivant pour les liens :

a {
color: #0066FF; 
text-decoration: none; 
font-weight: normal; 
} 
a:hover {
color: #009933;
background-color: #fff1d1;
border-bottom: 1px solid #ce6500;
}

Mais je voudrais que cela ne s'applique pas aux images (ça les fait "bouger")

J'ai ajouté :

a img  {
border: none;
}

J'ai essayé a:hover img ....

Mais ça ne donne pas le résultat voulu. Le code "hover" s'applique quand même.

Peut-être faut-il rajouter quelque chose ?

[jeanpierre949]

RE

essaie mais suis pas sure

img {

display: block;

border:0px;

}

Modifié 28 Septembre 2005 par jeanpierre949

[michmuch51]

et pourquoi tu ne le mettrai pas simplement dans ta balise

<img src="..." border="0" alt="...">

Modifié 28 Septembre 2005 par michmuch51

[Xavier]

Et si tu mettais un text-decoration:underline au lieu de rajouter une bordure ? Parce que la bordure va forcément agrandir le bloc... et il me semble qu'un underline non.

Juste un truc. Le border-bottom, tu l'appliques sur le a (en :hover). Le border: none; tu l'appliques sur le img... donc le a va garder son border-bottom de toutes façons

[spin0us]

Je suis un peu du même avis que Xavier.

Dégage ce border-bottom et remplace le par un text-decoration:underline;

Et si tu veux réellement garder le border pour la couleur, ben perso j'utiliserai peut-être une class spécifique de lien pour les images. Juste histoire que ca soit clair

Modifié 28 Septembre 2005 par spin0us

[jeanpierre949]

Faut savoir qu'une image "balise inline" se positionne comme du texte avec une marge inferieure de quelques pixels pour les lettres (p g q ) et donc le underline apparait aussi sous l'image d'ou la necessité du "display:block; " pour supprimer cet marge inferieure de l' "inline "

[Nullette]

Merci à vous tous.

Effectivement, en me limitant à underline, ça marche

# a:hover {

    * color : #009933;
    * background-color : #fff1d1;
    * text-decoration : underline;
    * color : #ce6500;

}
# a img {

    * border : none;

Il n'ya plus la marge inférieure de quelques pixels.