CSS: 1 lien pour img+texte (2 classes) ?
briisme
-
briisme Messages postés 24 Date d'inscription Statut Membre Dernière intervention -
briisme Messages postés 24 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
* Est-il possible d'avoir 2 classes pour un seul lien du style :
<p class="surligne"><a ...> <IMG class="nesurlignepas"> Sous-titre de l'image </a></p>
Sachant que je souhaite un surlignement du texte en a:hover (ex avec padding et background-color) mais pas de l'image (png transparente) lorsque la souris se place sur cette zone ?
Car rien de ce que j'ai essayé ne marche !!! Il y a au minimum une ligne le long de l'image, ou le padding-left qui apparaît dessus, et qui décale tout.
Merci de m'aider !
* Est-il possible d'avoir 2 classes pour un seul lien du style :
<p class="surligne"><a ...> <IMG class="nesurlignepas"> Sous-titre de l'image </a></p>
Sachant que je souhaite un surlignement du texte en a:hover (ex avec padding et background-color) mais pas de l'image (png transparente) lorsque la souris se place sur cette zone ?
Car rien de ce que j'ai essayé ne marche !!! Il y a au minimum une ligne le long de l'image, ou le padding-left qui apparaît dessus, et qui décale tout.
Merci de m'aider !
A voir également:
- CSS: 1 lien pour img+texte (2 classes) ?
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
11 réponses
Bonjour,
Normalement, si on peut. Je pense que ça vient du a:hover, mais pour être sûr j'aimerai bien voir ton css concernant tes deux classes et ton a.
Normalement, si on peut. Je pense que ça vient du a:hover, mais pour être sûr j'aimerai bien voir ton css concernant tes deux classes et ton a.
Hello, ci-joint le CSS :
Et en HTML :
La classe huitcent, c'est pour shadowbox, une lighbox qui passe par javascript, je donne le code js au cas où :
A partir de là je ne sais pas où aller... une class dans IMG ou une balise avant le texte n'y font rien.
.prince, .prince a:link, .prince a, .prince a:hover, .valet, .valet a:link, .valet a, .valet a:hover, .cavalier, .cavalier a:link, .cavalier a, .cavalier a:hover, .dame, .dame a:link, .dame a, .dame a:hover, .roi, .roi a:link, .roi a, .roi a:hover
{text-align: justify;display:inline;font-family:Helvetica, Verdana, Arial, sans-serif;position:relative;padding:0px;text-decoration:none;text-shadow: #000000 0 0 0px;/*POUR SAFARI*/text-transform: none;height:18px;line-height:24px;}
.prince, .prince a:link, .prince a{font-weight:500;color:#666;font-size:9pt;line-height:18px;}
.prince a:hover{font-weight:500;color:White;background-color:#969;font-size:9pt;padding:6px 6px 3px 6px;}
Et en HTML :
<span class="prince"><A class="huitcent" HREF="services-brainstorming.html"
ONMOUSEOVER="changeImages('service04', 'images/conception1-small.png'); return true;"
ONMOUSEOUT="changeImages('service04', 'images/conception1-ghost.png'); return true;">
<IMG SRC="images/conception1-ghost.png" ALT="CONCEPTION" TITLE="CONCEPTION" NAME="service04" Width="100%" BORDER=0>
Brainstorming & Slogan</A></span>
La classe huitcent, c'est pour shadowbox, une lighbox qui passe par javascript, je donne le code js au cas où :
Shadowbox.setup("a.huitcent", {width:800, height:600, gallery: "infos", displayCounter: "false"});
A partir de là je ne sais pas où aller... une class dans IMG ou une balise avant le texte n'y font rien.
Alors c'est pas possible ?
:(
:(
Bon alors, ce n'est pas une solution miracle : (j'ai simplifié le code pour la lecture)
En HTML
=> J'ai enlevé la classe du A et j'ai rajouté un span de class huitcent.
En CSS
Tu fais globalement ton a:hover uniquement avec ton span huitcent.
En HTML
<span class="prince">
<A HREF="test.html">
<IMG SRC="test.jpg" ALT="CONCEPTION" TITLE="CONCEPTION" NAME="service04" BORDER=0 class="nosurligne">
<span class="huitcent">Brainstorming & Slogan</span>
</A>
</span>
=> J'ai enlevé la classe du A et j'ai rajouté un span de class huitcent.
En CSS
Tu fais globalement ton a:hover uniquement avec ton span huitcent.
Merci d'avoir répondu, mais il manque la partie CSS non ?
En tout cas j'ai remodifié comme tu as dit, mais je vois toujours le padding du prince a:hover le long du bas de l'image. Mais surtout je suis obligé de garder une classe dans la balise <a> pour que la lightbox fonctionne.
Mais en oubliant la lighbox et en reprenant cet exemple tout simple :
CSS :
...est-il possible de faire en sorte que le padding n'aparaissent que sur le texte et non l'image PNG transparente ?
En tout cas j'ai remodifié comme tu as dit, mais je vois toujours le padding du prince a:hover le long du bas de l'image. Mais surtout je suis obligé de garder une classe dans la balise <a> pour que la lightbox fonctionne.
Mais en oubliant la lighbox et en reprenant cet exemple tout simple :
<span><a ...><IMG> Sous-titre de l'image </a></span>
CSS :
surligne a:hover {background-color:Blue;padding:10px}
nosurligne a:hover {/* Que faut-il mettre ici ? */}
...est-il possible de faire en sorte que le padding n'aparaissent que sur le texte et non l'image PNG transparente ?
Je ne suis pas sûr puisque ton image et ton texte est sur la même ligne. Ton padding sera uniquement sur ton texte, mais la ligne entière va bouger pour pouvoir inclure le padding du texte.
Dans le nosurligne, je pensais mettre quelque chose comme ça :
J'avais simplifié ton code uniquement pour le problème de css, hein. Rien ne t'empêche de mettre une classe à ton A (mais différente du surligne)
Dans le nosurligne, je pensais mettre quelque chose comme ça :
nosurligne a:hover {background-color:white;padding:0px}
J'avais simplifié ton code uniquement pour le problème de css, hein. Rien ne t'empêche de mettre une classe à ton A (mais différente du surligne)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Oui, pas de problème pour mettre un saut de ligne entre l'image et le texte, ou tout autre chose, mais je souhaite que l'image reste transparente à tout moment. Le fond de la page est une image.
Je n'arrive pas à annuler le padding ou à obliger la partie transparente de l'image à rester transparent... et je ne sais pas s'il existe une alternative au padding et fond coloré pour mettre en avant le texte au passage de souris... sachant qu'il ne faut qu'un seul <a> pour les 2...
Pourtant ça paraît bête à réaliser !!! En tout cas merci pour ton aide
Je n'arrive pas à annuler le padding ou à obliger la partie transparente de l'image à rester transparent... et je ne sais pas s'il existe une alternative au padding et fond coloré pour mettre en avant le texte au passage de souris... sachant qu'il ne faut qu'un seul <a> pour les 2...
Pourtant ça paraît bête à réaliser !!! En tout cas merci pour ton aide
background: none;...ne fonctionne pas non plus sur l'image.
la classe du <a> ou du <span> est prioritaire sur le reste, ou "parent" je crois.
Comment je peux éviter de faire des lignes ? Il faut que je fasse 2 divs ? J'ai déjà essayé les sauts de lignes... En tout cas le texte doit rester en :
display:inlinemais pas sûr que "block" règle le problème de "2 styles sur un même lien"... bigre :(
Hello,
Encadre ton texte et utilise du JS.
Ou quelque chose comme ça :)
Mihawk
"La rigoureusité fait la qualité"
Encadre ton texte et utilise du JS.
<p>
<a onMouseOver="this.childNodes[1].style.textDecoration='underline';">
<IMG class="nesurlignepas"/>
<span class="surligne">Sous-titre de l'image</span>
</a>
</p>
Ou quelque chose comme ça :)
Mihawk
"La rigoureusité fait la qualité"
J'imagine qu'il y a un code JS qui résoudrait le problème, mais dans tous les cas les balises <span> ou <p> ou autre à l'intérieur d'un <a> ne fonctionnent pas, au mieux on obtient un soulignement en pointillés (au lieu d'un surlignement rectangulaire avec du padding, ou quelque soit l'effet) !
<a...><span class="toutcequonveut">texte</span></a>Quelque soit la classe, ça ne change rien ! Ça aurait réglé le problème tout de suit si ça marchait :(
