classe css sur un lien image Fermé

Question

Bonjour,
    quelle est la synthaxe pour donner un style à une image servant de lien ?

j'ai essayé ce que j'ai trouvé "a img" mais ca ne change rien.

Le problème est que j'ai un fond (background-color: #FFFFFF) pour les liens, fond qui se retrouve en fond des images (transparentes)-liens.

Mes styles pour liens sont :
a:link, a {
	color: #669966;
	font-weight: bold;
	background-color: #FFFFFF;
	font-size: 12px;
	text-decoration:none
}
a:visited {
	color: #669966;
	font-weight: bold;
	background-color: #FFFFFF;
	font-size: 12px;
	text-decoration:none
}
a:hover {
	color: #FFFFFF;
	background-color: #669966;	
	font-weight: bold;
	font-size: 12px;
	text-decoration:none

}
a:active {
	color: #669966;
	font-weight: bold;
	background-color: #FFFFFF;
	font-size: 12px;
	text-decoration:none
}
    
et pour l'image:

img {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

Merci de votre aide.

koklikobleu · Accepted Answer

Bonjour Jeff,
ma demande est :
"quel nom donné à mon style pour une image qui supporte un lien."
En effet je ne veux pas de fond sur cette image. je veux que mon gif transparent reste transparent.


dans mon exemple j'ai essayé le nom de style "a img" :
 a img{
	background-color: none;
	text-decoration:none;
	border:0px;
} 

mais cela ne fonctionne pas.

Est-ce que c'est plus clair ?!  

cdt.

Jeff · Answer

Quel style veux-tu donner à tes images ? Ta demande n'est pas claire et je pense que le problème vient de là !

Si tu ne veux pas que le fond des images soit blanc, alors il ne faut pas mettre de fond blanc dans ta balise <A>.

Un bon tuyau : utilise Firefox et la Web developper Toolbar, cela te permettra d'éditer le CSS en temps réel dans ta page et donc de voir l'effet de tes changements dans la CSS !

Dalida · Answer

salut,

tu peux tout simplement définir une couleur de fond à l'image.

Dalida · Answer

re,

le sélecteur ("nom") est le bon mais la valeur de la propriété n'est pas bonne.
 a img{
	background-color: transparent;
	text-decoration:none;
	border:0px;
} 
si cela ne fonctionne toujours pas ajoute du poids à ton sélecteur en ajoutant les ascendants de la balise <a>. par exemple :
body div p a img
{
	background-color: transparent;
	text-decoration:none;
	border:0px;
}
et pour la bordure, la règle exacte est :
border-style:none;

koklikobleu · Answer

Dalida,

1/ j'ai mis une couleur de fond sur mon image, elle bien prise en compte. C'est déjà cela.
Mais dans l'hypothèse où cette couleur de fond change dans les différentes pages... Cette méthode n'est plus adéquate.

2/ Seul,
a img{background-color: transparent;
	text-decoration:none;
	border-style:none;} ne fonctionne pas

3/ a img{ background-color: transparent;
	text-decoration:none;
	border-style:none;} + 
img {
	background-color: transparent;
	} non plus

4/ en ajoutant les ascendants, ne fonctionne pas non plus.

je vais continuer à chercher de mon coté... et prendre la solution 1/ en attendant.

Merci de votre aide an tout cas.


PS : La Web developper Toolbar ne peut pas être utilisée sous FF 2.0

Dalida · Answer

re, j'espère avoir bien compris. pour des pages différentes tu peux ajouter un identifiant à la balise ciblée. sur une autre… et en CSS : a img { background-color:transparent; text-decoration:none; border-style:none; } a#lien-page1 img { background-color:blue; } a#lien-page2 img { background-color:green; } tu peux aussi appliquer l'identifiant à . Web developper Toolbar ne peut pas être utilisée sous FF 2.0 heureusement que si !!! -;o)

Daddy Cool · Answer

Salut, d'après moi, c'est un schmilblik avec les pseudo-class :link, :visited, etc.

Et si tu essais ceci :
a:link img, a:visited img, a:hover img, a:active img, a img {background-color:transparent;}
Qu'est-ce que ça donne ?

(y'a surement une façon plus élégante de tous les choisir, mais essaye déjà ça.

kokodos · Answer

salut, j'ai également eu des difficultés avec les liens images. Ca ne correspond pas tout à fait à ton problème, mais ça peut te mettre sur la piste. Tous les liens images sont entourés d'un cadre en pointillés rouge et ceux avec la classe spécifique n'ont pas d'encadrement: HTML:

CSS: .content a img { border: 2px dashed #FF0000; padding: 2px; } .content a.aimgnoborder img { border-style:none; } Voilà, j'espère avoir aider. A+

Classe css sur un lien image

8 réponses

Discussions similaires