28172 sujets

CSS et mise en forme, CSS3

[Résolu] Border sur des images en lien hover

Bon, voilà c'est un problème classique auquel j'avais trouvé la solution il y a quelques temps, seulement je n'ai aucun moyen d'y parvenir !
J'ai un CSS avec un border-bottom qui s'affiche sur les liens en couleur :
a
{
border: none;
color: #000000;
text-decoration: none;
}

a:hover
{
color: #000000;
border-bottom : 1px dashed black;
text-decoration: none;
}


Et pour une raison que j'ai oubliée, les images contenues dans les liens ont également un border-bottom quoi qu'on fasse...

J'ai tenté de mettre un id sur le lien ou sur l'image...
a img
{
border: 0;
}

#noborder a:hover
{
border-bottom: none;
}

a #noborder:hover
{
border-bottom: none;
}

a #noborder
{
border-bottom: none;
}

a #noborder
{
border-bottom: none;
}


Rien de tout cela ne fonctionne et l'image a toujours le border lorsqu'on la survole ! Je craque >.<

EDIT : Rien ne pourrait être plus clair que cette page : http://testomega.free.fr/test.html
Modifié par Julink (04 Aug 2008 - 00:44)
(dans ton exemple, tu définis deux fois l'id "noborder", une id est unique, utilise plutôt une classe dans ces cas là.)

Bonjour,

ce qui est souligné, dans ton exemple, c'est la balise "<a>" et non pas l'image, ton image, contenue dans une balise <a> est donc forcément souligné. Une première solution, serait simplement de mettre ton texte dans un paragraphe, et ensuite de remplacer ton style par:

p a {
border: none;
color: #000000;
text-decoration: none;
}

p a:hover {
color: #000000;
border-bottom : 1px dashed black;
text-decoration: none;
}


C'est une solution.

Sinon, toutes tes définitions pour l'image dans le css sont fausses:

- a img, va enlever le bord de l'image contenu dans la balise a, hors il n'y en a pas.
- #noborder a:hover, va enlever le bord inférieur des liens contenus dans la balise d'id #noborder, hors la première balise #noborder contient l'image et non pas le lien.

Et ainsi de suite pour les autres...

Essaye donc de retirer l'id noborder de la balise <img>, puis ensuite remplace toute la deuxième partie du css par:

#noborder {
border: none;
}


Chez moi ça marche, ça devrait fonctionner chez toi également.

[Edit]: Voilà ta page retouchée:

<style type="text/css">
a
{
border: none;
color: #000000;
text-decoration: none;
}

a:hover
{
color: #000000;
border-bottom : 1px dashed black;
text-decoration: none;
}

#noborder 
{
border: none;
}
</style>

<body>

<p><a href="#">Lien</a></p><br />
<a href="#" id="noborder"><img src="http://forum.alsacreations.com/titre.gif" /></a>

</body>

Modifié par circle (03 Aug 2008 - 23:01)
Bonsoir tous et bienvenue Julink ,

Allez, j'y vais de ma petite contribution également Smiley cligne

+1 pour circle : un id est unique dans une page html

Concernant ton petit soucis, il me semblait qu'il pouvait s'agir d'un espace indésirable sous ton image, et à ce propos, tu trouveras quelques infos sur cet article de la FAQ et sur ce document assez souvent mentionné sur ce forum...

Ce qui pourrait donner dans ton exemple :
css

a{
border: none;
color: #000000;
text-decoration: none;
}
a:hover{
color: #000000;
border-bottom : 1px dashed black;
text-decoration: none;
}
a img {border:none;text-decoration:none;display:block;}

html :

<a href="#">Lien</a><br /><br />
<a href="#"><img src="http://forum.alsacreations.com/titre.gif" /></a>


Sauf erreur de ma part, nous obtenons le résultat attendu, mais je peux me tromper... Smiley smile

@Heyoan: merci pour ce lien que je ne n'avais pas encore visité Smiley cligne

Cdt,
Sylvain
Modifié par 6l20 (03 Aug 2008 - 23:35)
Heyoan a écrit :
un peu de lecture : Soulignement des images dans un lien.
Sauf qu'ici il ne s'agit pas de ça. Smiley cligne

Julink, je vois deux problèmes dans ce que tu fais, qui sont deux problèmes de compréhension de ta part:

1. Tu essaies d'enlever la bordure de l'image, avec des sélecteurs qui visent l'image (typiquement: a img {border: none;}). Mais tu as définie ta bordure au survol pour les éléments A, pas pour les éléments IMG! Ce n'est donc pas l'image qui a une bordure, mais bien le lien, même si visuellement sur ta page de test tu as l'impression que l'image a une bordure au survol; c'est faux, c'est la bordure du lien qui s'affiche, tout simplement.
(Ceci dit, un a img {border: none;} est toujours utile, car certains navigateurs affichent une bordure unie tout autour d'une image contenue dans un lien, qu'elle soit survolée ou pas.)

2. Tu as des sélecteurs complètement incohérents, qui ne visent absolument aucun élément de ta page de test. Il faut de toute urgence réviser les sélecteurs CSS de base, et notamment le fonctionnement du sélecteur descendant:
http://www.w3.org/TR/CSS21/selector.html#descendant-selectors
Modifié par Florent V. (03 Aug 2008 - 23:28)
Florent V. a écrit :
Sauf qu'ici il ne s'agit pas de ça. Smiley cligne
Arf ! Oui... lecture un peu rapide ! Smiley ravi
Tout débord merci infiniment pour vos réponses rapides, efficaces et précises ! J'avoue que mon CSS était pour le moins brouillon car je sais qu'un id est unique mais c'était seulement destiné à montrer que c'étaient là diverses options que j'avais essayées sans succès... Rien de valide du tout bien sûr, mais j'étais tellement désespéré que j'ai osé le faire quand même ^^'

Ensuite, encore merci à circle et Florent V. ! Je savais que c'était la balise A qui posait problème, mais en y regardant de plus près c'est vrai que j'ai fait n'importe quoi ! Il suffisait de donner un id au lien uniquement (ce que je n'ai pas fait, étant apparemment trop précipité) pour que la classe des balises A disparaisse pour celui-ci et donne une image sans bordures !

Sinon, oui pour le a img{border:none;}, il était destiné à simplement retirer le border par défaut que la plupart des navigateurs assignent aux images en lien :O

Enfin bref, merci à tous, vous me rendez un grand service en un clin d'oeil ! Smiley biggrin
Sujet clos
Aller à