[Résolu]Bordure liens images

bonjours!

j'ai un petit probleme!

j'ai appliqué un style a mes liens par default

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

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

le probleme et que cela s'applique aussi a mes images qui possède un lien

donc j'aimerais savoir si il existait un system pour lui dire que cela s'applique a tous mes liens, sauf a mes images

j'ai testé ca

img a:hover {  border:none }
img a {border:none }

mais ca n'a pas l'aire de fonctionner

merci
Modifié par StyleSho (08 Sep 2006 - 21:36)

C'est juste le contraire

a img, a:hover img {border:none;}

Modifié par Benjamin D.C. (08 Sep 2006 - 10:18)

Benjamin D.C. a écrit :
C'est juste le contraire

a img, a:hover img {border:none;}

marche po

le code de Benjamin D.C. devrait fonctionner.

tu peux nous montrer le code HTML ?
Modifié par Zeke (08 Sep 2006 - 13:54)

Zeke a écrit :
le code de Benjamin D.C. devrait fonctionner.

tu peux nous montrer le code HTML ?

Non il ne peut pas fonctionner. Car c'est l'image qui est un lien. Et non un lien qui devient une image (hum )

Donc il faut bien mettre :

a img comme classe.

En revanche je me pose la question de la rigueur.

J'ai remarqué que dans le code fournit, il n'a mit aucun ";" après les lignes des propriétés CSS..
c'est pourtant indispensable.
Donc quand tu as effectué la correction, as-tu bien mit les points virgules après chaque propriété ?

Si oui ou que ça ne fonctionne toujours pas, fait un copier coller de ton code, (X)html compris.

Edit : Ah t'as édité pour l'erreur Zeke
Modifié par Paul-Hewson (08 Sep 2006 - 14:00)

il devrait avoir un truc comme ca :

<a href="#"><img src="..."  alt="" /></a>

donc, le code CSS de Benjamin D.C. est bon.

Et j'ai pensé, en lisant la phrase de StyleSho, et en voyant son code, qu'il avait peut etre écrit ca, ou un truc du genre :

<img src="..." alt=""><a href="#"></a></img>

d'où l'erreur de hiérarchie, et le non fonctionnement du code CSS proposé par Benjamin D.C.

img { margin:0; padding:0; border:3px solid black;}

img a:hover {  border:none; }
img a {border:none; }

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

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

<ul style="margin-left: 25px;">
				
<li style="margin: 0pt; padding: 0pt; width: 20%; float: left; text-align: center;"><a href="#"><img src="#" style="border: medium solid rgb(204, 204, 204); width: 48px; height: 48px; line-height: 150%;">
</a></li>
</ul>

j'ai mis juste une partie

voili voilou

Première erreur, dans ton code html tu as écris ceci :

border: medium solid rgb(204, 204, 204);

Hors si tu appliques cette propriété sur ton image, ça annule l'effet que pourrait avoir le fichier CSS.

Je te résume la règle de priorité rapidement.

Le code css intrusif (dans le code html donc) a la priorité sur le code css placé dans l'en tête (entre les balises "head") qui a lui même la priorité sur le code css provenant d'un fichier externe.

Donc déjà, tu ne dois pas mettre cette ligne border dans ta balise "img" si tu souhaites éliminer la bordure.

Ensuite dans ton code CSS tu n'as pas corrigé l'erreur que l'on t'as signalée.. à savoir qu'il te faut mettre a img { ...} et a:hover img{...}

Si tu regardes ton code html, tu verras que la balise "a" est l'élément parent de la balise "img" et non l'inverse. C'est donc les balises "img" comprisent dans les balises "a" qui doivent recevoir la modification des bordures et non l'inverse
Modifié par Paul-Hewson (08 Sep 2006 - 14:41)

mets tous les styles dans ta feuille CSS.
ca évite les erreurs à la con...

ton problème vient d'un écrasement entre la feuille CSS et les attributs style des balises...

et c'est :

a img{...}

et pas l'inverse.

edit : grillé sur la ligne par un commentaire bien complet
Modifié par Zeke (08 Sep 2006 - 14:36)

Oui,

puis tu devrais vraiment virer tous ces styles dans les balises, ça aide pas pour la clarté de lecture du code.

Dans un premier temps, et tu as commencé, mets les dans le <head>, ça t'apprendra les sélecteurs css et la cascade.

j'ai bien testé, avec la forme que vous m'avez donnée et en virant la propriété du border dans le style de l'image, mais cela ne change toujours rien.

si je l'aisse les style directement dans mon fichier c'est parceque je fais souvent des tests vite fais, et des que ca marche je rentre le tout dans le fichier css ( je sais c'est pas ce qu'il y a de mieu mais je m'y suis habitué)

pour mon probleme, si quelque pouvais faire le test juste avec ce que j'ai donnée, car pour ma part j'ai fais le test et ca ne marche pas

img { margin:0; padding:0; border:3px solid black;}

a img, a:hover img {border:none;}

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

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

<li><a href="#"><img src="images/arrow_down.png"></a></li>

j'ai fais le test avec un fichier tout bete et les propriété qui vont avec et chez moi ca marche pas

tu as forcément un bout de code que tu ne nous as pas donné qui parasite le reste...

balance toute ta page, mais avec tous les styles centralisés...

Sinon essaie vraiment d'abandonner ta méthode là...pour les petits tests c'est bien, mais dès que tu attaques des styles en cascades ca devient tendu...

courage ! on va y arriver

ben deja sans les "parasites", ca marche pas, donc j'imagine que si je met toute la page, ca passera encore moins

StyleSho a écrit :
ben deja sans les "parasites", ca marche pas, donc j'imagine que si je met toute la page, ca passera encore moins

Donnes la quand même, on analysera nous même d'où vient le problème

Tu peux avoir confiance

Bonjour,

Cette bordure du bas étant appliquée à l'élément A, on ne peut l'enlever en visant l'élément IMG.

N'existant pas de sélecteur capable d'atteindre un élément en fonction de ses enfants ou descendants, il faut soit appliquer un style particulier pour les liens contenants une image en ajoutant un attribut de classe par exemple, soit essayer de masquer cette bordure (en jouant sur l'alignement vertical de l'image par exemple)
Modifié par Alan (08 Sep 2006 - 15:09)

ah oui bien vu !
j'avais pas pensé que c'est de cette bordure là qu'il parlait....

Alan a écrit :
Bonjour,

Cette bordure du bas étant appliquée à l'élément A, on ne peut l'enlever en visant l'élément IMG.

N'existant pas de sélecteur capable d'atteindre un élément en fonction de ses enfants ou descendants, il faut soit appliquer un style particulier pour les liens contenants une image (en ajoutant un attribut de classe par exemple) soit essayer de masquer cette bordure (en jouant sur l'alignement vertical de l'image par exemple)

je vias tester la methode d'alain, je reviens vers vous apres, merci

En effet, j'ai moi aussi cru qu'il parlait de la grosse bordure autour.
Je n'ai d'ailleurs pas vraiment prêté attention au soulignement en pointillé de la bordure inférieure.

Paul-Hewson a écrit :
En revanche je me pose la question de la rigueur.

J'ai remarqué que dans le code fournit, il n'a mit aucun ";" après les lignes des propriétés CSS..
c'est pourtant indispensable.

Bonjour Paul-Hewson,
Les points-virgules servent à séparer les déclarations. Pour la dernière déclaration du bloc ou si celui-ci n'en contient qu'une, le point-virgule est inutile (même si personnellement je le mets quasiment toujours, ça m'évite des erreurs d'inattention).