CSS: 1 lien pour img+texte (2 classes) ?
Fermé
briisme
-
15 févr. 2012 à 05:47
briisme Messages postés 24 Date d'inscription dimanche 26 décembre 2010 Statut Membre Dernière intervention 4 février 2013 - 28 févr. 2012 à 05:19
briisme Messages postés 24 Date d'inscription dimanche 26 décembre 2010 Statut Membre Dernière intervention 4 février 2013 - 28 févr. 2012 à 05:19
A voir également:
- CSS: 1 lien pour img+texte (2 classes) ?
- Enlever couleur lien css ✓ - Forum CSS
- Mettre une image à gauche css ✓ - Forum CSS
- Css exposant ✓ - Forum CSS
- Déplacer une image css - Forum CSS
- Css download - Télécharger - HTML
11 réponses
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
15 févr. 2012 à 10:13
15 févr. 2012 à 10:13
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.
briisme
Messages postés
24
Date d'inscription
dimanche 26 décembre 2010
Statut
Membre
Dernière intervention
4 février 2013
6
Modifié par briisme le 16/02/2012 à 01:10
Modifié par briisme le 16/02/2012 à 01:10
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.
briisme
Messages postés
24
Date d'inscription
dimanche 26 décembre 2010
Statut
Membre
Dernière intervention
4 février 2013
6
20 févr. 2012 à 07:18
20 févr. 2012 à 07:18
Alors c'est pas possible ?
:(
:(
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
Modifié par AssassinTourist le 20/02/2012 à 09:47
Modifié par AssassinTourist le 20/02/2012 à 09:47
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.
briisme
Messages postés
24
Date d'inscription
dimanche 26 décembre 2010
Statut
Membre
Dernière intervention
4 février 2013
6
20 févr. 2012 à 09:45
20 févr. 2012 à 09:45
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 ?
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
20 févr. 2012 à 09:51
20 févr. 2012 à 09:51
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
briisme
Messages postés
24
Date d'inscription
dimanche 26 décembre 2010
Statut
Membre
Dernière intervention
4 février 2013
6
Modifié par briisme le 20/02/2012 à 10:31
Modifié par briisme le 20/02/2012 à 10:31
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
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
20 févr. 2012 à 10:47
20 févr. 2012 à 10:47
background: no-background; alors ?
Pour le padding, comme je te l'ai dit, c'est sûrement parce que la ligne entière se met à niveau pour intégrer le padding qui est seulement sur une partie de la ligne.
Pour le padding, comme je te l'ai dit, c'est sûrement parce que la ligne entière se met à niveau pour intégrer le padding qui est seulement sur une partie de la ligne.
briisme
Messages postés
24
Date d'inscription
dimanche 26 décembre 2010
Statut
Membre
Dernière intervention
4 février 2013
6
Modifié par briisme le 20/02/2012 à 11:14
Modifié par briisme le 20/02/2012 à 11:14
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 :(
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
20 févr. 2012 à 11:25
20 févr. 2012 à 11:25
Normalement, le style parent ne prédomine pas, justement !
Bon, mais sinon, je manque d'idées :$
Bon, mais sinon, je manque d'idées :$
briisme
Messages postés
24
Date d'inscription
dimanche 26 décembre 2010
Statut
Membre
Dernière intervention
4 février 2013
6
20 févr. 2012 à 11:35
20 févr. 2012 à 11:35
Tanpis, merci quand même d'avoir planché dessus !
briisme
Messages postés
24
Date d'inscription
dimanche 26 décembre 2010
Statut
Membre
Dernière intervention
4 février 2013
6
21 févr. 2012 à 13:47
21 févr. 2012 à 13:47
up
Mihawk
Messages postés
4313
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
845
Modifié par Mihawk le 23/02/2012 à 14:00
Modifié par Mihawk le 23/02/2012 à 14:00
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 :(
Mihawk
Messages postés
4313
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
845
24 févr. 2012 à 09:38
24 févr. 2012 à 09:38
Et quid de si tu ajoutes dans ton CSS
a {
text-decoration:none;
}
briisme
Messages postés
24
Date d'inscription
dimanche 26 décembre 2010
Statut
Membre
Dernière intervention
4 février 2013
6
Modifié par briisme le 24/02/2012 à 22:47
Modifié par briisme le 24/02/2012 à 22:47
Ben du coup le sous-titre de l'image n'est plus décoré !!
Je crois que la seule solution est d'en faire 2 liens... une pour l'image non surlignée et un pour le texte surligné... il semble impossible d'avoir 2 styles sous un même lien :( dommage ça aura l'air moins dynamique
Je crois que la seule solution est d'en faire 2 liens... une pour l'image non surlignée et un pour le texte surligné... il semble impossible d'avoir 2 styles sous un même lien :( dommage ça aura l'air moins dynamique
briisme
Messages postés
24
Date d'inscription
dimanche 26 décembre 2010
Statut
Membre
Dernière intervention
4 février 2013
6
28 févr. 2012 à 05:19
28 févr. 2012 à 05:19
non résolu... :(
oin-oin
oin-oin
