Salut,

Afin de pouvoir t'aider, puis-je avoir ton code HTML et CSS de tes infobulles actuels ?

Je te remercie

salut ^^
le css est:

Code:

.lock  {
  position: relative;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 5px;
  padding-right : 5px;
  padding-top  : 2px;
  padding-bottom : 2px;
    top: 35px;
    left: 0px;
  /* style du bloc qui apparait */
  border: 2px groove #305875;
  border-radius: 5px;
  background-image: url('http://i26.servimg.com/u/f26/11/66/17/91/fond10.png');
  -moz-border-radius: 1px;
  text-align: center;
    visibility: visible;
width: 85px;
height: 60px;
}
.lock:hover .lock-hidden {
  display: block;
}

le code html est:

Code:

<DIV class=lock>
<DIV align=center><FONT face=Arial><IMG border=0 alt="" src="http://img11.hostingpics.net/pics/300114lilice.png" width=100 height=100></FONT></DIV>
<DIV class=lock-hidden>
<DIV align=center><FONT size=1 face=Arial>Alice White</FONT></DIV>
<DIV style="TEXT-ALIGN: center" arial=""><FONT size=1>Fondatrice</FONT></DIV>
<DIV align=center><FONT color=#000000 size=1 face=Arial><A href="http://pandora-hearts.bbfr.net/u1">Profil</A></FONT><FONT face=Arial><FONT size=1> - </FONT><FONT color=#000000 size=1><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=1">MP</A></FONT></FONT></DIV><FONT face=Arial><FONT color=#000000 size=1><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=1"></A></FONT></FONT></DIV></DIV><BR></TD>
<TD>
<DIV class=lock>
<DIV align=center><FONT face=Arial><IMG border=0 src="http://img4.hostingpics.net/pics/483792Sanstitre5.png" width=100 height=100></FONT></DIV>
<DIV class=lock-hidden>
<DIV align=center><FONT size=1 face=Arial>Lacky Rainth</FONT></DIV>
<DIV align=center><FONT size=1>Administr- </FONT></DIV>
<DIV align=center><FONT size=1>-atrice</FONT></DIV>
<DIV align=center><FONT color=#000000 size=1 face=Arial><A href="http://pandora-hearts.bbfr.net/u4">Profil</A></FONT><FONT face=Arial><FONT size=1> - </FONT><FONT color=#000000 size=1><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=4">MP</A></FONT></FONT></DIV></DIV></DIV><BR></TD></TR>
<TR>
<TD>
<DIV class=lock>
<DIV align=center><FONT face=Arial><IMG style="WIDTH: 100px; HEIGHT: 100px" border=0 alt="" src="http://img11.hostingpics.net/pics/916295gio.png" width=100 height=100><BR></FONT></DIV>
<DIV class=lock-hidden>
<DIV align=center>
<DIV align=center><FONT size=1 face=Arial>Giovanni Rockafeller </FONT></DIV><FONT size=1><FONT face=Arial>Graph' &amp; Admin<BR></FONT><FONT color=#000000 face=Arial><A href="http://pandora-hearts.bbfr.net/u6">Profil</A></FONT><FONT face=Arial> -</FONT></FONT><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=6"><FONT size=1 face=Arial> </FONT></A><FONT color=#000000 size=1 face=Arial><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=6">MP</A></FONT></DIV></DIV></DIV><BR></TD>
<TD>
<DIV class=lock>
<DIV align=center><FONT size=1 face=Arial><IMG style="WIDTH: 100px; HEIGHT: 100px" src="http://img4.hostingpics.net/pics/332390ochida.png" width=100 height=100><BR></FONT></DIV>
<DIV class=lock-hidden>
<DIV align=center><FONT size=1 face=Arial>Ochida Daisuke<BR></FONT><FONT size=1 face=Arial>Modo chatbox &amp; Admin provisoire<BR></FONT>
<DIV align=center><A href="http://pandora-hearts.bbfr.net/u3"><FONT size=1 face=Arial>Profil</FONT></A><FONT size=1 face=Arial> - </FONT><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=3"><FONT size=1 face=Arial>MP</FONT></A></DIV></DIV></DIV>

Je souhaiterai également savoir comment avoir des pointillés pour le contour si le 3D n'est pas possible car je suis aussi interéssée.
bonne soirée.

Ok. Donc je t'explique, tout ce passe dans le CSS Surtout sur cette ligne :

Code:

border: 2px groove #305875;

Donc pour avoir des pointillés il faut changer le mot "groove" en "dotted".
Pour la 3D, tu dois changer "groove" en "outset". Mais pour avoir un effet comme sur l'image, tu dois effacer les contours arrondit et augmenter la taille des bordures. Donc tu dois augmenter les 2px qui sont dans le code ci-dessus et effacé dans le code CSS complet, ces codes là :

Code:

border-radius: 5px;

et

Code:

-moz-border-radius: 1px;

Il existe beaucoup de style de bordure. Je te conseille par exemple ce site-là : Clik ! où il y a marqué quelques bordures ainsi que ses exemples. Les noms des bordure sont dans les bordures, c'est le premier mot, donc il faut mettre l'un de ces mots, a la place de celui dans le code là :

Code:

border: 2px groove #305875;

Voilà, si tu as une question sur cela, pose là, aucun problème

Bonne soirée.

Édit Sasuke : si tu utilises Google Chrome sur le site que je t'ai donné, ne traduit surtout pas la page, sinon, les noms seront en français et ça fonctionnera plus.

Bonjour,
merci beaucoup ^^
sujet résolu.