Sujets similaires

Plop =D

Concernant ton premier code c'est ton CSS et non ton template Wink

Et pour ta question désolé mais je ne peux pas te répondre =S Je suppose que ça doit être possible mais j'ai aucune idée de comment réaliser cela.

Désolé, j'espère juste qu'un codeur viendra t'éclairer Wink

Merci beaucoup, oui effectivement c'est mon CSS xD.

Merci pour ce tuto super bien expliqué

Plus besoin de ce que j'ai demandé j'ai totalement changé c'était plus simple

Keitaro : Il faut que tu fasses bouger ton infobulle en modifiant les valeurs ici :

Code:: top: 5px;
left: 15px;

Okay merci beaucoup Very Happy

.
Si à l'occasion j'en ai besoin j'y penserai

Par contre désolé du double post mais sur le forum les infobulles décalent les autres images et je n'arrive pas à mettre de contour, pourtant j'ai lu les 10 pages :/

plop =D

Pourrais-on avoir ton code ainsi que le lien de ton forum stp ? ;D

[center]Oui oui pas de soucis

Alors voici le lien du forum

Spoiler:

Le CSS :

Spoiler:

Et le code de la page d'accueil :

Spoiler:

Code:: <DIV align=center><IMG src="http://img340.imageshack.us/img340/3541/bienvenuechezles.png"></DIV><BR>
<DIV style="TEXT-ALIGN: center"></DIV>
<DIV id=navigation>
<UL>
<LI><A href="http://crazypinktigers.forum-actif.net/pink-reglement-f9/">Règles</A>
<LI><A href="http://crazypinktigers.forum-actif.net/memberlist.forum">Membres</A>
<LI><A href="http://crazypinktigers.forum-actif.net/pink-roster-f10/">Roster</A>
<LI><A href="http://crazypinktigers.forum-actif.net/pink-raids-f5/">Raids</A>
<LI><A href="http://crazypinktigers.forum-actif.net/profile.forum?mode=register">Vous inscrire</A>
<LI><A href="http://crazypinktigers.forum-actif.net/pink-invites-f20/">Partie invités</A></LI></UL></DIV><BR><BR>
<DIV align=center><IMG src="http://img10.imageshack.us/img10/3857/fondxg.jpg"></DIV>
<TABLE style="WIDTH: 100%; BORDER-COLLAPSE: collapse">
<TBODY>
<TR>
<TD>
<DIV align=center><IMG style="WIDTH: 249px; HEIGHT: 70px" src="http://img195.imageshack.us/img195/3936/annoncesn.png" width=233 height=63></DIV></TD>
<TD>
<DIV align=center> </DIV>
<DIV align=center><IMG src="http://img39.imageshack.us/img39/3108/histoiredelaguilde.png"></DIV></TD>
<TD>
<DIV align=center> </DIV>
<DIV align=center><IMG src="http://img199.imageshack.us/img199/1695/lestaff.png"></DIV></TD></TR>
<TR>
<TD>
<DIV align=center>
<TABLE style="BORDER-BOTTOM: #b86885 2px solid; BORDER-LEFT: #b86885 2px solid; WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-TOP: #b86885 2px solid; BORDER-RIGHT: #b86885 2px solid">
<TBODY>
<TR style="BORDER-BOTTOM: #b86885 2px solid; BORDER-LEFT: #b86885 2px solid; BORDER-TOP: #b86885 2px solid; BORDER-RIGHT: #b86885 2px solid">
<TD style="BORDER-BOTTOM: #b86885 2px solid; BORDER-LEFT: #b86885 2px solid; BORDER-TOP: #b86885 2px solid; BORDER-RIGHT: #b86885 2px solid">
<P><FONT size=2></FONT> </P><FONT size=2><SPAN lang=HE>
<DIV align=justify></SPAN>Version 2 du forum par U-</FONT><FONT size=2>Japan*.</FONT> </DIV><FONT size=2><SPAN lang=HE>
<DIV align=justify></SPAN>Pour plus de clarté, les sujets en règles ont été verrouillés. Si vous souhaitez les modifier, envoyer un MP à un Admin.</FONT> </DIV><FONT size=2><SPAN lang=HE>
<DIV align=justify></SPAN>Le nouveau chef de guilde est Titagone, bravo à lui !</DIV>
<DIV align=justify>Ce forum est optimisé pour Internet Explorer 7.</DIV>
<DIV align=justify><STRONG>Merci de vous présentez mais surtout de vous faire recenser dans la partie artisanat !</STRONG></FONT></DIV>
<P><FONT size=2></FONT> </P></TD></TR></TBODY></TABLE></DIV></TD>
<TD>
<DIV align=center>
<TABLE style="BORDER-BOTTOM: #b86885 2px solid; BORDER-LEFT: #b86885 2px solid; WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-TOP: #b86885 2px solid; BORDER-RIGHT: #b86885 2px solid">
<TBODY>
<TR style="BORDER-BOTTOM: #b86885 2px solid; BORDER-LEFT: #b86885 2px solid; BORDER-TOP: #b86885 2px solid; BORDER-RIGHT: #b86885 2px solid">
<TD style="BORDER-BOTTOM: #b86885 2px solid; BORDER-LEFT: #b86885 2px solid; BORDER-TOP: #b86885 2px solid; BORDER-RIGHT: #b86885 2px solid">
<DIV align=left>
<DIV style="BORDER-BOTTOM: #dcb6c4 1px dotted; TEXT-ALIGN: center; COLOR: #ffffff"><B><FONT color=#dcb6c4 size=5 face=Georgia Georgia??>L'histoire de la guilde</FONT></B></DIV></DIV>
<DIV align=justify><FONT size=2>L'histoire de la guilde est actuellement en cours d'écriture</FONT></DIV></TD></TR></TBODY></TABLE></DIV></TD>
<TD>
<DIV align=center>
<TABLE style="BORDER-BOTTOM: #b86885 2px solid; BORDER-LEFT: #b86885 2px solid; WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-TOP: #b86885 2px solid; BORDER-RIGHT: #b86885 2px solid">
<TBODY>
<TR style="BORDER-BOTTOM: #b86885 2px solid; BORDER-LEFT: #b86885 2px solid; BORDER-TOP: #b86885 2px solid; BORDER-RIGHT: #b86885 2px solid">
<TD style="BORDER-BOTTOM: #b86885 2px solid; BORDER-LEFT: #b86885 2px solid; BORDER-TOP: #b86885 2px solid; BORDER-RIGHT: #b86885 2px solid">
<P> </P>
<DIV align=center><A class=infobulle href="#"><IMG src="http://img33.imageshack.us/img33/7324/mcbrightminiature.jpg"> <SPAN><IMG src="http://img241.imageshack.us/img241/6638/mcbright2.jpg"><BR><B>McBright </B><BR><BR>Race : Humain<BR>Classe : Guerrier<BR>Spé : Tank/fureur<BR>Rerolls : Aureon, Palouf<BR>Demo ^^, Vallanar<BR><B>Statut : Admin</B></SPAN></A> <A class=infobulle href="#"><IMG src="http://img339.imageshack.us/img339/6285/ujapanminiature.jpg"> <SPAN><B>U-JAPAN*</B><BR><BR>Non joueuse<BR><B>Statut : Admin/Graphiste</B> <A class=infobulle href="#"><IMG src="http://img171.imageshack.us/img171/2606/amethisteminiature.png"> <SPAN><IMG src="http://img9.imageshack.us/img9/3750/amethiste2.jpg"><BR><B>Amethiste</B><BR><BR>Race : Elfe de la nuit<BR>Classe : Druidesse <BR>Spé : Heal/Equi<BR>Rerolls : Teani<BR><B>Statut : Admin</B></SPAN></A>
<DIV align=center><A class=infobulle href="#"><IMG src="http://img413.imageshack.us/img413/9448/elmanderminiature.png"> <SPAN><IMG src="http://img693.imageshack.us/img693/886/elmander2.jpg"><BR><B>Elmander </B><BR><BR>Race : Gnome<BR>Classe : Mage<BR>Spé : DPS arcanes/givre<BR>Rerolls : Chriseus, Malforan<BR>Ciryck<BR><B>Statut : Admin</B></SPAN></A> <A class=infobulle href="#"><IMG src="http://img197.imageshack.us/img197/4051/cadfaelminiature.jpg"> <SPAN><IMG src="http://img580.imageshack.us/img580/9760/cadfael2.jpg"><BR><B>Cadfael</B><BR><BR>Race : Humain<BR>Classe : Prêtre heal<BR>Spé : Discipline/unicible<BR>Rerolls : Ariok<BR><B>Statut : Admin</B></SPAN></A> <A class=infobulle href="#"><IMG src="http://img337.imageshack.us/img337/694/sekhmettminiature.png"> <SPAN><IMG src="http://img375.imageshack.us/img375/6213/sekhmett2.jpg"><BR><B>Sekhmett</B><BR><BR>Race : Draeneï<BR>Classe : DK <BR>Spé : Sang<BR>Rerolls : //<BR><B>Statut : Admin</B></SPAN></A> <A class=infobulle href="#"><IMG src="http://img706.imageshack.us/img706/958/titagoneminiature.jpg"> <SPAN><IMG src="http://img580.imageshack.us/img580/3466/titagone2.jpg"><BR><B>Titagone</B><BR><BR>Race : Draeneï<BR>Classe : DK <BR>Spé : Givre/Sang<BR>Rerolls : Titamage/Titinoux<BR><B>Statut : Admin/Chef de guilde</B></SPAN></A> <A class=infobulle href="#"><IMG src="http://img205.imageshack.us/img205/269/athennasminiature.jpg"> <SPAN><IMG src="http://img339.imageshack.us/img339/9692/athennas2.jpg"><BR><B>Athennas</B><BR><BR>Race : Humaine<BR>Classe : Prêtresse <BR>Spé : Heal<BR>Rerolls : Camulos/Anubîs<BR>Exena/Fachak<BR>Démonnia/Christals<BR><B>Statut : Admin</B></SPAN></A>
<DIV align=center> </DIV></SPAN></A></DIV></DIV>
<DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
<DIV style="TEXT-ALIGN: center"></DIV><BR><BR>
<DIV align=center><IMG src="http://img706.imageshack.us/img706/581/motdelafin.png"></DIV>

Y'a aussi des pointillés qui cachent le texte dans les infobulles mais si vous ne voulez pas vous en charger je le conçois très bien !

Bonjour
Quelques petites erreurs dans le CSS faisaient buguer le tout je pense.
Essaye avec ceci :

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: #000000;
color: pink;
padding: 3px;

border: 1px dotted pink;
}

Oh merci beaucoup tout est parfait :O

Avec plaisir =)

bonjour a vous ,
Voila j'ai réussis a faire des infobulles sur un texte mais j'aimerai le faire sur une image , comme sur CSS et bien d'autre ..

le lien du forum :

Spoiler:

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: 999; /* 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: 5px; /* on positionne notre infobulle */
left: 30px;

background: #ebebeb; /* 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;
}

Donc voila , Merci d'avance de m'indiquer ou est ce que je dois placer mon image : Wink

:

Mais c'est indiqué dans le tuto comment faire pour une image...

HI!

Je viens de tester, et c'est parfait *-* JUSTE! Un détail que j'aimerais "changer". Le curseur, lorsqu'on le passe sur l'infobulle, est la main avec le doigt tendu. J'aimerais que ce soit la flèche normale, toute simple (sauf quand on passe sur le lien, bien sûr). Est-ce possible? Si oui, comment?

Merci d'avance à tous =3

Bonjour,
il faut que tu enlèves :

Citation :: cursor: help

MERCI!!!

J'ai pas la fonction éditer +__+ Où qu'elle est la fonction cursor? +_______+

Pardon j'ai dû fumer quelque chose. Oubli ce que j'ai dit xD

Je peux voir ton code HTML et CSS pour l'infobulle s'il te plaît ?

Merci pour ce tuto il m'a bien aidé.
Vous êtes vraiment une équipe géniale.
Merci, bonne soirée à toutes et à tous

Bonsoir =)

J'ai cherché dans les 10 pages à l'aide de Ctrl + F, mais rien trouvé, donc je me permet de demander, peut-être une seconde fois mais pourtant j'ai bien regardé.
J'ai un petit soucis avec mon infobulle, j'aimerais lui donner une largeur précise, 200px très exactement, et lorsque j'utilise "Width: 200px", l'infobulle en elle-même prend cette taille mais le texte continue en sortant du cadre..

Est-il possible de remédier à ça ? Ou bien je me suis plantée en ajoutant ceci ?

Bonsoir, le texte ne s'adapte pas à la taille de l'infobulle :'(

Pour remédier à cela tu dois ajouter <br> pour revenir à la ligne Wink

Bonne soirée

Arf, c'est bien dommage Euh..

En tout cas merci d'avoir répondu aussi rapidement,
bonne journée/soirée.

Bonjour =)
Alors voilà -après avoir lutté un peu x)- j'ai réussi à placer mes infobulles.
Simple petit soucis que j'ai remarqué -et qui m'a fait tourner chèvre x)- en jonglant sur Google Chrome et Mozilla, j'ai remarqué une différence que j'aimerai bien remettre en "ordre" =3

Je vous montre les images (c'plus simple à comprendre comme ça x)

En premier, l'image prise sur Mozilla avec la souris qui passe sur l'image, bref tout impec'

Spoiler:

En second, les images prises sur Google Chrome (la première sans passer la souris sur l'image, la seconde en la passant)

Spoiler:

Ce que je souhaiterai, si c'est possible, c'est que l'image (le petit crayon rose qui dirige au mp) soit placée dans l'infobulle lorsque je suis sous Google Chrome... Mais aussi, que le soulignement soit retiré... Cela est du domaine du possible? =3

(Je mets mon html au passage voir si ça vient de mon côté ^^" )

Code:: <a href="#" class="infobulle"><img src="http://moe.mabul.org/up/moe/2010/06/27/img-005827xk731.png">
<span><b>C</b>loud <b>S</b>rife<br>Administrateur,<br>Surveillant.<br><div><a href="http://b-cloud-and-lollipop.forumactif.com/msg.forum?mode=post&u=2" target="_blank"><img src="http://i84.servimg.com/u/f84/12/34/61/81/tinipe11.gif"></a>

J'vous remercie!

question très bete mais bon. comme on dit mieux vaut passer un un idiot 5 minute que de rester ignorant a vie.

Peut on avoir differente infobulles?

Je veux dire bon on fait premier style d'info bulle avec un genre.
mais si on veut d'autre info bulles pour un autre endroit par exemple mais dont l'affichage serai different.

Suffit t'il de changer le nom "infobulle" du css et de la class comme si c'etait n'importe quele style ou estce que ca a une incidence. faut il garde le mot infobulle1 ou autre du genre?

Merci

Faire une infobulle (messages)

Faire une infobulle (messages)

Sujets similaires

Sujets similaires

Partenaires Or