Sujets similaires

Tu peux avoir différentes infobulles sans problème =D

Par exemple, ta class pour une infobulle dans ta page d'accueil par exemple pourrait être .bullepa et dans un message ça pourrait être .bullemsg

Tu installes le code sous les deux (ou plus) class d'infobulles que tu veux en y apportant les modifs que tu veux, et tu as plusieurs infobulles différentes =D

Ouki merci beaucoup pour l'info je vais bosser ca alors Wink

Superbe topic, magnifiquement bien expliqué !
J'adore, ça fonctionne nickel, MERCI BEAUCOUP =)

Bonjour,
Merci pour ce topic. :3

Par contre j'ai quelques soucis, je n'ai pas d'infobulle qui s'affiche. x3

Voici mon HTML :

Code:: <td><center><font color="SeaGreen"><font face="Futura"><b>N</b>atsu<br>
<span><class="infobulle"><img src="http://img24.imageshack.us/img24/8884/natsublackxwithe.png"></a><br><p>The crazy girl</p></span></font></font><div><a href="http://pensionnat-zakurai.forumactif.org/profile.forum?mode=viewprofile&u=1" _blank="">Voir le profil</a><br><a href="http://pensionnat-zakurai.forumactif.org/msg.forum?mode=post&u=1">Envoyez un Mp</a></div><font color="#990033"><font face="Futura"><b>M</b>axeen<br>
<span><class="infobulle"><img src="http://pmsc.free.fr/I03/10711163316.png"></a><br><p>The Black Rose</p></span></font></font><div><a href="http://pensionnat-zakurai.forumactif.org/profile.forum?mode=viewprofile&u=3" _blank="">Voir le profil</a><br><a href="http://pensionnat-zakurai.forumactif.org/profile.forum?mode=email&u=3">Envoyez un Mp</a></div><font color="#Crimson"><font face="Futura"><b>H</b>aru<br>
<span><class="infobulle"><img src="http://img714.imageshack.us/img714/9943/harusalamander.png"></a><br><p>The cute Dragon girl</p></span></font></font><div><a href="http://pensionnat-zakurai.forumactif.org/profile.forum?mode=viewprofile&u=4" _blank="">Voir le profil</a><br><a href="http://pensionnat-zakurai.forumactif.org/msg.forum?mode=post&u=4">Envoyez un Mp</a></div></center>
</td>

Et voici ma CSS :

Code:: a.infobulle {
position: relative;
}

a.infobulle span {
display: none;
}
a.infobulle:hover {
background: none;
z-index: 999;

}
a.infobulle:hover span {
display: inline;
position: absolute;

white-space: nowrap;

top: 5px;
left: 15px;

background: #FFFFFF;

color: black;
padding: 3px;

border: 2px dotted white;
border-left: 2px dotted white;
}

Et merci d'avance pour celui qui voudrait bien s'en occuper. >.<

merci pour le tuto. Mais j'ai une petite question. Comment fait-on pour changer la forme de l'info bulle? s'il te plais.

Je ne suis pas experte, mais il me semble que tu peux changer tous les attributs de tes infobulles sur le CSS Wink

*petite voix : « c’est encore moi » *

Superbe tuto hyper simple qui fonctionne à merveille sur Firefox…évidemment, sans « mais » ça ne serait pas rigolo -_-‘
Sous IE ça ne fonctionne pas. En cherchant les topics similaires, j’ai vu qu’en changeant les « a » par « div » ça pouvait fonctionner. Sauf qu’ici, non, comme de par hasard Rolling Eyes

Je n’ai que mes petites icônes, et absolument rien ne se passe.

Spoiler:

Voilà donc mes codes – il est possible qu’un détail m’ai échappé ^^

Spoiler:

Merci à la personne qui saura m’éclairer ^^

*EDIT: le problème ne se pose plus sur IE7!!!! il semblerait que virer les "a" pour mettre des "div" ne fonctionne pas avec l'ancienne version d'IE *

Excusez-moi, mais je n'y arrive pas. J'ai pourtant essayer de pluieurs façons. Et ma dernière était de prendre des codes déjà pris et de les modifiers ensuite avec mes images et mes informations, mais voilà ce que le forum donne avec le code de lilipad pour hosted(voir page 1 oui, je sais c'est ^^)

http://essaiecss.purforum.com/forum.htm

P.S: c'est un forum test.

J'ai utilisé ce tuto pour mon forum et il marche très bien merci beaucoup !

Bonjour ! Moi j'ai un problème, l'infobulle s'affiche mais en bas completement de ma PA tandis que je voudrais quelle s'affiche quand je passe sur un avatar en particulier .

Bonjour

Tout d'abord, merci pour ce tuto très bien expliqué, donc qui marche sans bémol x)

J'ai juste une petite question mineure : lorsque je mets deux infobulles à la suite, elles se superposent.

Spoiler:

Or, j'aimerais qu'elles se suivent sur la même ligne. J'ai essayé plusieurs choses, en supprimant des balises, mais sans résultat :S Auriez-vous la solution pour moi ?

Voilà mon code HTML :

Code:: <a href="#" class="infobulle"><img src="http://i30.servimg.com/u/f30/15/40/19/13/flower10.png">
<span>[color=green]Gabrielle[/color]
<img src="http://i30.servimg.com/u/f30/15/40/19/13/info10.png">
<div><a href="http://foret-des-damnes.forumactif.org/" target="_blank">lien</a></div></span></a><a href="#" class="infobulle"><img src="http://i30.servimg.com/u/f30/15/40/19/13/flower10.png">
<span>[color=green]Gabrielle[/color]
<img src="http://i30.servimg.com/u/f30/15/40/19/13/info10.png">
<div><a href="http://foret-des-damnes.forumactif.org/" target="_blank">lien</a></div></span></a>

Et mon codage CSS :

Code:: a.infobulle {
position: relative;
}

a.infobulle span {
display: none;
}
a.infobulle:hover {
background: none;
z-index: 999;

}
a.infobulle:hover span {
display: inline;
position: absolute;

white-space: nowrap;

top: 5px;
left: 15px;

background: #4D2E10;

color: black;
padding: 3px;

border: 1px dotted black;
border-left: 1px dotted black;

cursor: help;
}

Et le lien vers les infobulles sur mon forum : here.

Merci d'avance pour votre aide Smile

EDIT : Je ne sais pas si ça peut vous servir, mais mon navigateur est Mozilla Firefox.

Hoy~

Pour que les infobulles restent sur la même ligne, il suffit de faire un tableau~

Citation :: Pour t'aider à visualier le tableau, je l'ai mit en rouge en désactivant le html~

<table><tr><td><a href="#" class="infobulle"><img src="https://i.servimg.com/u/f30/15/40/19/13/flower10.png">
<span>Gabrielle
<img src="https://i.servimg.com/u/f30/15/40/19/13/info10.png">
<div><a href="http://foret-des-damnes.forumactif.org/" target="_blank">lien</a></div></span></a></td>
<td><a href="#" class="infobulle"><img src="https://i.servimg.com/u/f30/15/40/19/13/flower10.png">
<span>Gabrielle
<img src="https://i.servimg.com/u/f30/15/40/19/13/info10.png">
<div><a href="http://foret-des-damnes.forumactif.org/" target="_blank">lien</a></div></span></a></td></tr></table>

EDIT: *retire le code de la balise code parce qu'elle plante pour rien oo*

Yeayyy ça marche x))

Merci beaucoup !! Very Happy

J'y arrive vraiment pas !!!!!! aidez moi pliz !!!

en fait c'est cette image ; Faire une infobulle (messages) - Page 7 Aaa11

que je voudrai mettre en info bulle et c'est celle ci : Faire une infobulle (messages) - Page 7 Ze11

qui apparait ...

personne ne pourrais me faire un exemple . me montrer.... Faire une infobulle (messages) - Page 7 732153

ça fait trois jour j'essaye de comprendre comment ça fonctionne mais je n'y arrive pas

Salut ^^
Merci pour ce tuto !!
Par contre, j'aurais aimé avoir une largeur maximale de 150 px...
J'ai rajouté max-width:150px; dans le code mais le texte sors de l'infobulle :s
Enfin, constate par toi même...

Spoiler:

Sujet: Re: Faire une infobulle (messages) Lun 06 Sep 2010, 18:11

Coucou, j'ai un probleme avec les liens dans les infobulles de ma PA :S J'ai essayer de deux facon differentes ca n'affiche toujours pas a l'interieur, pouvez vous m'aider?

Voici mon HTML:

Code:: <table style="width: 80%; border-collapse:collapse; border:2px none #1100A8;">
<tr style="border:2px dotted #ffffff;">
   <td style="border:2px none #12008A;"><td align=left><img src='http://i27.servimg.com/u/f27/14/97/78/56/staff310.jpg'></img></td></td>
   <td style="border:2px none #12008A;"><div style="width:250px;height:254px;overflow:auto;"></div></td>
   <td style="border:2px none #12008A;"><div style="width:250px;height:272px;overflow:auto;"><div style="background-image:url('http://i27.servimg.com/u/f27/14/97/78/56/fond_i10.jpg');">En ce moment, rien ne va plus chez les Cullen, Chrissy souhaite quitter le clan, depuis qu’elle sait que sa mère, Rosalie Hale, aura un autre vampire à sa charge. Au fil des semaines, les tensions augmentent de plus en plus et les Cullen se montent les uns contre les autres à cause des enfants humains présents dans le clan. Carlisle voudrait que ces enfants les quittent pour vivre une meilleure vie auprès des humains, mais il doit faire face aux refus de sa fille Rosalie, surtout que cette dernière a perdu ses deux enfants. Chrissy partie et Liam aussi chez des humains inconnus. Elle n'aime pas celadu tout et aurait preferer les garder pres d'elle. Et cela sans le consentement des Volturi.

D’ailleurs en parlant des Volturi, ceux-ci doivent faire face au départ de l’une de leur membre Emelianne, qui a brusquement quitté son clan pour rejoindre les Cullen, ce qui risque fortement d’augmenter la haine des Volturi envers les Cullen.

De plus, la Famille Cullen devra faire face à la future trahison d’Aidan, fils d’Edward, puisque ce dernier fraternise avec la sadique Jane Volturi, Alec furieux envers sa sœur jumelle, déchire l’invitation au Bal des Vampire et contraint ceux-ci à ramener de force la fugueuse.

Maintenant parlons de notre cher clan Castle, ces derniers tout fraichement amis des Cullen, doivent faire face eux aussi a des problèmes. Marek et Salazia rompirent et le jeune homme quitta le clan pour réfléchir sur son avenir. Adriel, le chef du clan parti à sa recherche, mais au lieu de tomber sur Marek, il rencontra Chrissy Cullen.

Quand aux Silveryn, ils doivent faire face à l’arrivée de la meilleure amie de Rosalie, tout fraîchement transformé par Matthew, mais surtout incontrôlable. Les Silveryn se devront de la protéger contre elle et surtout faire attention de ne pas s’attirer les foudres des Volturi. Peu de temps après, Matthew trahie Marion et elle se rendit chez Rosalie pour que celle-ci l’aide à changer. Quelques heures plus tard, Rose reçoit la visite d’Alissa qui veut devenir végétarienne. Cette trahison provoquera des tensions entre les Silveryn qui n’acceptent pas la décision de leur amie.</div></div></td>
</tr>
<tr style="border:2px dotted #ffffff;">
<td style="border:2px none #12008A;"><div style="border: solid 3px white; height: 100px; width: 100px;"><a href="" class="infobulle"><img src="http://img6.imageshack.us/img6/5255/rosie3o.png">
<span><img src='http://i40.tinypic.com/4ij2ic.gif'>Fondatrice et Admin<a href="http://revolution-twilight.forumotion.com/profile.forum?mode=viewprofile&page_profil=contact&u=1">Contacter</a><a href="LIEN" target="_blank">Voir les Infos</a></span></a></div><div style="border: solid 3px white; height: 100px; width: 100px;"><a href="#" class="infobulle"><img src="http://img255.imageshack.us/img255/7282/marionicone2.png"><span><img src='http://img404.imageshack.us/img404/686/brooke7.gif'>Moderatrice tendre<a href="http://revolution-twilight.forumotion.com/profile.forum?mode=viewprofile&u=29" target="_blank">Voir le profil</a><a href="http://revolution-twilight.forumotion.com/msg.forum?mode=post&u=29" target="_blank">Contacter</a><a href="http://revolution-twilight.forumotion.com/presentations-valides-f23/presentation-de-marion-khan-t94.htm" target="_blank">Voir les infos</a></span></a></td>
   <td style="border:2px none #12008A;"><div style="border: solid 3px White; height: 100px; width: 100px;"><img src='http://img259.imageshack.us/img259/349/edwardicone2.png'></img></div><div style="border: solid 3px white; height: 100px; width: 100px;"><img src='http://img823.imageshack.us/img823/3690/athena2.png'></img></div></td>
   <td style="border:2px none #12008A;"><img src='http://i27.servimg.com/u/f27/14/97/78/56/le_mei10.jpg'>
<img src='http://i27.servimg.com/u/f27/14/97/78/56/img_be11.jpg'></td>
<td style="border:2px none #12008A;"><img src='http://i27.servimg.com/u/f27/14/97/78/56/tops_p10.jpg'></img><span><marquee behavior="scroll" direction="up" scrollamount="2" height="70"><a href="http://eternal-cullen.forumtwilight.com/forum.htm" class="postlink" target="_blank"><img src="http://nsa08.casimages.com/img/2009/09/03/090903034411834522.png" border="0" alt="" /></a> <a href="http://lumospoudlard.xooit.com" class="postlink" target="_blank"><img src="http://img48.xooimage.com/files/6/7/a/100x35.2-1b610a0.png" border="0" alt="" /></a> <a href="http://castle-life.vampire-legend.net/forum.htm" class="postlink" target="_blank"><img src="http://i37.servimg.com/u/f37/14/97/78/56/lvv_bm10.jpg" border="0" alt="" /></a> <a href="http://behind-the-door.forumactif.com/" class="postlink" target="_blank"><img src="http://i46.tinypic.com/2zsbq1d.png" border="0" alt="" /></a> <a href="http://princeton.forums-actifs.net/" class="postlink" target="_blank"><img src="http://img42.xooimage.com/files/c/e/0/boutonprince3-1054c88.gif" border="0" alt="" /></a> <a href="http://www.pub-rpg-design.com/forum.htm" class="postlink" target="_blank"><img src="http://img412.imageshack.us/img412/3107/prdpartenariat0.png" border="0" alt="" /></a> <a href="http://css-actif.forumactif.org/" class="postlink" target="_blank"><img src="http://files.o-side.com/upload/CSSActif/css-actif-10035.gif" border="0" alt="" /></a> <a href="http://createur2forum.forumactif.org/" class="postlink" target="_blank"><img src="http://i28.tinypic.com/zu4jcw.png" border="0" alt="" /></a> <a href="http://yuutou-no-shima.forum-actif.net/forum.htm" class="postlink" target="_blank"><img src="http://img7.hostingpics.net/pics/861251minibannieretopsite_copie.jpg" border="0" alt="" /></a></marquee></span><img src='http://img411.imageshack.us/img411/7329/venezvoter.png'></img>
<span><marquee behavior="scroll" direction="up" scrollamount="2" height="70"><a href="http://www.root-top.com/topsite/winmania/in.php?ID=169" class="postlink" target="_blank"><img src="http://img80.imageshack.us/img80/3788/topsite.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/rpgtwilight/in.php?ID=352" class="postlink" target="_blank"><img src="http://img80.imageshack.us/img80/3788/topsite.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/fot/in.php?ID=114" class="postlink" target="_blank"><img src="http://img80.imageshack.us/img80/3788/topsite.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/low/in.php?ID=158" class="postlink" target="_blank"><img src="http://img80.imageshack.us/img80/3788/topsite.gif" border="0" alt="" /></a>
<a href="http://www.root-top.com/topsite/twi/in.php?ID=184" class="postlink" target="_blank"><img src="http://img80.imageshack.us/img80/3788/topsite.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/juicyjude/in.php?ID=106" class="postlink" target="_blank"><img src="http://img80.imageshack.us/img80/3788/topsite.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/anita/in.php?ID=1120" class="postlink" target="_blank"><img src="http://img80.imageshack.us/img80/3788/topsite.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/glam/in.php?ID=1737" class="postlink" target="_blank"><img src="http://img80.imageshack.us/img80/3788/topsite.gif" border="0" alt="" /></a>
<a href="http://www.root-top.com/topsite/topprince/in.php?ID=95" class="postlink" target="_blank"><img src="http://img80.imageshack.us/img80/3788/topsite.gif" border="0" alt="" /></a></marquee></span></td>
</tr>
<tr style="border:2px dotted #ffffff;">
   <td style="border:2px none #12008A;"></td>
   <td style="border:2px none #12008A;"><a href="http://revolution-twilight.forumotion.com/reglement-et-contexte-f11/le-contexte-t2.htm" class="postlink"target="_blank"><img src='http://i27.servimg.com/u/f27/14/97/78/56/contex11.jpg'></a> <a href="http://revolution-twilight.forumotion.com/reglement-et-contexte-f11/le-reglement-t1.htm" class="postlink" target="_blank"><img src='http://i27.servimg.com/u/f27/14/97/78/56/reglem10.jpg'></a><a href="http://revolution-twilight.forumotion.com/postes-vacants-f13/" class="postlink" target="_blank"><img src='http://i27.servimg.com/u/f27/14/97/78/56/postes10.jpg'></a></td>
   <td style="border:2px none #12008A;"><a href="http://revolution-twilight.forumotion.com/reglement-et-contexte-f11/les-credits-t273.htm" class="postlink" target="_blank"><img src='http://i27.servimg.com/u/f27/14/97/78/56/credit10.jpg'></a><a href="http://revolution-twilight.forumotion.com/graphisme-f38/" class="postlink" target="_blank"><img src='http://i27.servimg.com/u/f27/14/97/78/56/graphi11.jpg'></a></td>
   <td style="border:2px none #12008A;"><a href="http://revolution-twilight.forumotion.com/partenariats-f16/" class="postlink" target="_blank"><img src='http://i27.servimg.com/u/f27/14/97/78/56/parten11.jpg'></a></td>
</tr>
</table>
<html><head>
<style type="text/css">
.mycss
{
font-weight:normal;font-variant:small-caps;color:#ffffff;letter-spacing:1pt;word-spacing:2pt;font-size:11px;text-align:center;font-family:arial, helvetica, sans-serif;line-height:1;
}
</style>
</head>
<body>
<p class="mycss">(c) La nouvelle vie des Cullen / Reproduction totale ou partielle totalement Interdite !</p>
</body>

Et mon CSS:

Code:: a.infobulle {
position: relative;
}

a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 50; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
display: inline; /* ceci 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: 3px; /* on positionne notre infobulle */
left: 12px;

background: #ffffff; /* arrière-plan de l'infobulle */

color: black; /* texte dans l'infobulle */
padding: 3px;

/* bordures de votre infobulle*/
border: 1px dotted black;
border-left: 1px dotted black;
}

Ces codes sont sur mon forum test qui est celui-ci:

Code:: http://forum-test-css2.forumactif.org/

Je sais, j'ai aussi un probleme avec mon image de fond qui n'est pas fix dans l'intrigue mais cela n'est pas le sujet ici Wink

Merci de bien vouloir m'aider Smile

Sujet: Re: Faire une infobulle (messages) Jeu 09 Sep 2010, 14:40

Bonsoir , Puis-je savoir ou mettre le code HTML quand c'est pour l'image de profil d'un membre

Sujet: Re: Faire une infobulle (messages) Jeu 09 Sep 2010, 15:11

Si je comprends bien, tu veux faire une infobulle sur l'avatar des membres?Pour cela, il te suffit de faire une petite recherche sur le forum, à "avatar infobulle", Haricoow à fait un tutoriel dessus.

Bisous~

Sujet: Re: Faire une infobulle (messages) Jeu 09 Sep 2010, 15:19

Merci ;-]

Sujet: Re: Faire une infobulle (messages) Ven 10 Sep 2010, 15:42

Bonsoir, alors déjà, je tien à te remercier de cet excellent tuto qui m'aide à comprendre de plus en plus les capacités du css. Mais ensuite, voilà mon problème:
Edit: finalement j'ai un tout autre problème. Est-il possible de faire marcher un défilement dans une infobulle ?
Voici le code (je ne mets pas tout, juste la case concerné)

Spoiler:

Sujet: Re: Faire une infobulle (messages) Mer 22 Sep 2010, 15:18

Bonsoir ^-^

Merci tout d'abord pour la base de l'infobulle, ça marche très bien et les codes sont facilement compréhensible. Mais je galère sur un point. J'ai visionné la plupart des pages pour être certaines.

J'aimerai faire un texte dans une infobulle ( relation ) avec le code WIDTH mais ça ne fonctionne pas. Tout reste sur une même et unique ligne. J'vous dis pas la longueur de la page XD. Merci d'avance ♥

Edit : Autant pour moi, il fallait juste que je supprime un code x')

Sujet: Re: Faire une infobulle (messages) Mer 22 Sep 2010, 16:11

Cuian , tu pourrais exposer ton problème plus clairement ? Il s'agit de faire un défilement dans une infobulle ou autre chose ?

Sujet: Re: Faire une infobulle (messages) Mer 22 Sep 2010, 16:16

Erf ! J'ai oublié d'éditer, le problème est résolu enfait Razz

Sinon pour information, je voulais faire défiler dans l'infobulle les minis bannières de partenariat de bas en haut. Enfaite il n'y avait pas vraiment de problème, juste quelques bugs sur mon pc je crois x)
Mais merci ^_^

Sujet: Re: Faire une infobulle (messages) Lun 27 Sep 2010, 21:00

Bonsoir! Bon tuto mais pourquoi le code ne fonctionne que sous internet explorer et non sous firefox? Avez-vous un petit code pour mozilla pour que cela marche comme sous explorer? Merci d'avance Smile

(même si sous explorer mes images ne figurent que sous la forme d'une croix, ce qui est un problème de navigateur aussi Neutral

)

Sujet: Re: Faire une infobulle (messages) Mar 19 Oct 2010, 13:44

J'ai un problème avec mes infos bulles ( à gauche de la pa):
http://holigandesign.forums-actifs.com/index.htm

Sous mozilla, pas de soucis. Sous IE, ok. Safari je crois que c'ets bon, mais google chrome est incapable de me les aligner.
Il me les place en colonne u__u

EDIT : quelle nouille, j'avais justement pas lu les quelques derniers messages. Problème résolu grâce au tableau !

Sujet: Re: Faire une infobulle (messages) Ven 05 Nov 2010, 09:46

Bonjour,

Je viens de lire les 12 pages, j'ai bien essayer quelques truc par moi-même mais là je sèche....

J'ai un petit soucis avec mes infobulles dans mon message d'accueil, elles passent sans aucun soucis sous firefox.

Mais absolument pas sous IE ni sous safari, seule l'image est caché , pour Gchrome je ne sais pas.

Ca me donne ça :

Spoiler:

Mon code CSS:

Spoiler:

Et l'un des codes HTLM :

Spoiler:

Faire une infobulle (messages)

Faire une infobulle (messages)

Sujets similaires

Sujets similaires

Partenaires Or