CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Infobulle dans un message, c'est possible? | |
| Akya
{ Membre }
Messages : 207
| Tout est dans le titre, je souhaiterais savoir si cela est possible (bien que j'en suis quasi certaine puisqu'il me semble l'avoir vu sur un forum) et si oui, serait-il possible d'avoir ce code? Merci beaucoup! |
Dernière édition par Akya le Dim 09 Mai 2010, 12:27, édité 1 fois | |
| | | xEmiilyeee
{ Membre actif }
Messages : 381
| [Tu souhaites mettre une image ou un lien pour que l'infobulle apparait ? | | |
| | | Akya
{ Membre }
Messages : 207
| Une image de 100*100 et dès que le curseur est dessus, l'infobulle s'ouvre avec uniquement du texte dedant. =) | | |
| | | xEmiilyeee
{ Membre actif }
Messages : 381
| le code css a mettre dans le feuille de style - Code:
-
* { font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;
} a.info { position: relative; color: #576186; text-decoration: none; }
a.info span { display: none; /* on masque l'infobulle */ font-size: 12px;
} a.info:hover { background: none; /* correction d'un bug IE */ z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */ } a.info:hover span { display: inline; /* on affiche l'infobulle */ position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 60px; /* on positionne notre infobulle */ left: 60px;
background: #C0CDE5;
color: #576186; padding: 3px;
border: 3px solid #3E3D70; } et le code htlm a mettre dans tes messages - Code:
-
<a class="info">[img]icon 100*100[/img]<span>texte info bulle</span></a> | | |
| | | Akya
{ Membre }
Messages : 207
| Ca marche, c'est super! ^^ Le seul truc qui me chifonne, c'est que j'aimerais bien que le cadre qui s'affiche face 315 de largeur. La hauteur se fera par rapport à la quantité du texte à l'intérieur, mais là, lorsque j'ai essayer, si je n'allais pas à la ligne en tapant mon texte, mon cadre était tout en longueur et ne faisait pas la taille que je souhaiterais. ^^' Je suis assez chiante, je sais lol.
Merci en tout cas! =D | | |
| | | xEmiilyeee
{ Membre actif }
Messages : 381
| code html « dans tes postes. » - Code:
-
<a class="info">[img]ton image[/img]<span>[justify]texte de l'infobulle.[/justify]</span></a> code css - Code:
-
{ font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;
} a.info { position: relative; color: #576186; text-decoration: none; border-bottom: 0px #7d7d7d solid; /* on souligne le texte */ }
a.info span { display: none; /* on masque l'infobulle */ font-size: 12px; }
a.info:hover { background: none; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */ cursor: help; /* on change le curseur par défaut en curseur d'aide */ }
a.info:hover span { display: inline; /* on affiche l'infobulle */ position: absolute; white-space: wrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */ top: 30px; /* on positionne notre infobulle */ left: 20px; background: #C0CDE5; color: #576186; padding: 3px; border: 3px solid #3E3D70; width:120px }
| | |
| | | Akya
{ Membre }
Messages : 207
| Super! Dernier truc: Je ne veux pas que le texte à l'intérieur soit en italique et souligné. Juste normal. Il faut modifier quoi?
EDITE: Problème résolu, merci beaucoup de ton aide! =) | | |
| | | Adrénalia
{ Membre }
Messages : 33
| Même problème, comment fait-on pour que le texte ne soit ni en italique, ni souligné? =3 | | |
| | | Contenu sponsorisé
| | | | | Infobulle dans un message, c'est possible? | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|