Classe css sur un lien image
koklikobleu
Messages postés
10
Date d'inscription
Statut
Membre
Dernière intervention
-
kokodos -
kokodos -
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 :
et pour l'image:
Merci de votre aide.
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.
A voir également:
- Css class img
- Img burn - Télécharger - Gravure
- Fichier img - Télécharger - Photo & Graphisme
- Img extractor - Télécharger - Animation
- Enlever le soulignement d'un lien css - Astuces et Solutions
- Nvcontainer windows class - Forum Javascript
8 réponses
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" :
mais cela ne fonctionne pas.
Est-ce que c'est plus clair ?!
cdt.
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.
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:
<div class="content">
<p><a href="#"><img src="image.gif" alt="image" /></a></p>
<!-- lien image normal donc avec cadre rouge -->
<p><a href="#" class="aimgnoborder"><img src="image2.gif" alt="image 2" /></a></p>
<!-- lien avec class spécifique pour ne pas avoir de contour -->
</div>
CSS:
.content a img {
border: 2px dashed #FF0000;
padding: 2px;
}
.content a.aimgnoborder img {
border-style:none;
}
Voilà, j'espère avoir aider. A+
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:
<div class="content">
<p><a href="#"><img src="image.gif" alt="image" /></a></p>
<!-- lien image normal donc avec cadre rouge -->
<p><a href="#" class="aimgnoborder"><img src="image2.gif" alt="image 2" /></a></p>
<!-- lien avec class spécifique pour ne pas avoir de contour -->
</div>
CSS:
.content a img {
border: 2px dashed #FF0000;
padding: 2px;
}
.content a.aimgnoborder img {
border-style:none;
}
Voilà, j'espère avoir aider. A+
re,
le sélecteur ("nom") est le bon mais la valeur de la propriété n'est pas bonne.
si cela ne fonctionne toujours pas ajoute du poids à ton sélecteur en ajoutant les ascendants de la balise <a>. par exemple :
et pour la bordure, la règle exacte est :
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;
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,
3/
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 :
tu peux aussi appliquer l'identifiant à <img />.
Web developper Toolbar ne peut pas être utilisée sous FF 2.0
heureusement que si !!!
-;o)
j'espère avoir bien compris.
pour des pages différentes tu peux ajouter un identifiant à la balise ciblée.
<a id="lien-page1" href="#"><img scr="fichier1.png" /></a>
sur une autre…
<a id="lien-page2" href="#"><img scr="fichier2.png" /></a>
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 à <img />.
Web developper Toolbar ne peut pas être utilisée sous FF 2.0
heureusement que si !!!
-;o)
Salut, d'après moi, c'est un schmilblik avec les pseudo-class :link, :visited, etc.
Et si tu essais ceci :
Qu'est-ce que ça donne ?
(y'a surement une façon plus élégante de tous les choisir, mais essaye déjà ça.
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.
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 !
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 !
