Problème avec l'infobulle :/

[Ayumu Yamazaki]

Bonsoir,

Depuis plusieurs heures j'essaye de faire une infobulle sur une image, mon problème c'est que cela ne fonctionne pas, peu importe le code que je met :/

Voici le forum où il y a l'infobulle (C'est l'image sur la page d'accueil) : http://forum-test-ayu.forumgratuit.org/

Le code de ma PA :

Code:

<table width="100%" cellspacing="8px" cellpadding="0px">
    <tr><td colspan=width="50%">
<center><div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;"><div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">.Le Staff. ~</div><div style="overflow: auto; width:98%; height:100px; text-align: justify;"><center><table><tr><td><div class="infobulle"><img src="http://i47.servimg.com/u/f47/14/37/81/10/ayu_bm15.jpg">
        <span>Ayumu Yamazaki,<br>Fondatrice.</span></div></td></tr></table> </center></div></center>
<td colspan=width="50%">
<center><div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;"><div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">.Bienvenue {USER&amp;#8288;NAME}. ~</div><div style="overflow: auto; width:98%; height:100px; text-align: justify;"><center>Pour protéger les êtres magiques, Souchiro Tokaï créa une vile loin des humains. Ainsi, Dieux, Démons, Sorciers, Hybrides, Vampires et Elfes étaient enfin libérés de la persécution
Seuls les personnes possédant des pouvoirs magiques peuvent recevoir la lettre d'admission.
Alors, seriez vous les suivants ?</center></div>
</div></center>
</td><td colspan=width="50%">
<center><div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;"><div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">.Prédéfinis. ~</div><div style="overflow: auto; width:98%; height:100px; text-align: justify;"><center>ECRIRE ICI</center></div>
</div></center>
</td></tr><tr><td colspan=width="20%"><center><div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;"><div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">.Les ragots. ~</div><div style="overflow: auto; width:98%; height:100px; text-align: justify;"><center>ECRIRE ICI</center></div>
</div></center></td><td colspan=width="20%"><center><div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;"><div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">.Les nouveautés. ~</div><div style="overflow: auto; width:98%; height:100px; text-align: justify;"><center>ECRIRE ICI</center></div>
</div></center></td><td colspan=width="20%"><center><div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;"><div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">.La météo des rps. ~</div><div style="overflow: auto; width:98%; height:100px; text-align: justify;"><center>ECRIRE ICI</center></div>
</div></center></td></tr><tr><td colspan=width="20%"><center><div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;"><div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">.Les top-sites. ~</div><div style="overflow: auto; width:98%; height:100px; text-align: justify;"><center>ECRIRE ICI</center></div>
</div></center></td><td colspan=width="20%"><center><div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;"><div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">.Les partenaires. ~</div><div style="overflow: auto; width:98%; height:100px; text-align: justify;"><center>ECRIRE ICI</center></div>
</div></center></td><td colspan=width="20%"><center><div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;"><div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">.Les crédits. ~</div><div style="overflow: auto; width:98%; height:100px; text-align: justify;"><center>ECRIRE ICI</center></div>
</div></center></td></tr></table>

Et le code entier de mon CSS (au cas où si c'est à cause de l'un des codes) :

Code:

a { text-decoration: none; } (soulignement)
.tableau
{border: 8px solid #F08B8B}

.présentation
{margin-center: 2px;
  border: #2456FF 5px solid;
  padding: 5px; 
  -moz-border-radius: 10px;
  width: 300px}

.bg
{border: 3px solid #2456FF;
  background-color: #828BF5}
_____________________
*/INFOBULLE/*
   
       
            .infobulle{
            position: relative;
            z-index: 0;}
       
            .infobulle:hover{
            background-color: transparent;
            z-index: 50;}
       
            .infobulle span{
            position: absolute;
            background-color: #000000;
            padding: 5px;
            left: -1000px;
            visibility: hidden;
            color: #FFFFFF;}
       
            .infobulle span img{
            border: 2px;
            padding: 5px;}
       
            .infobulle:hover span{
            visibility: visible;
            top: 70px;
            left: 35px;
            width: 200px ;
            color:#FF0000;
            border: 2px solid #0000FF;}

*/FIN INFOBULLE/*
________________________
.onglet{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border: 1px solid #000000;
  cursor: pointer;
  width: 18%;
  list-style: none;}
   
.onglet_selectionner{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: none !important;
  cursor: pointer;
  width: 18%;
  list-style: none;}

.onglet:hover{
  background: #9C1C56;}
       
.clear{
  clear: both;}

.contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #000000;
  padding: 10px;
  list-style: none;}

#les_contenus, #les_onglets{
  width: 100%;}

___________________________
.over .cate1
{
font-family: time new roman; times;
letter-spacing: 4px;
background-color: #5a442d;
background-image: url(http://host.image.files.free.fr/host/4a2c3f3c6d235backtitre.jpg);
background-repeat: no-repeat;
color: #ffebd1;
text-align : center;
padding: 1px;
margin: 3px;
margin-bottom: -5px;
}

___________________________________________
/*QEEL*/
.barre1{
background-color:#D9E5F5;border: 1px #2D81EA solid;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:left;
text-decoration: none !important;
height:auto}

.statistiques{
border:0px;
background-repeat: no-repeat;
background-position: center;
height:200px;}

.groupes{
background-color:#D9E5F5;border: 1px #2D81EA dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;
height:auto}
___________________________

*/PROFIL*/

        .profil_speudo {
            background-color: #FFFFFF;
            border: 2px solid #2456FF;
          -moz-border-radius:10px;
          -webkit-border-radius:10px;
            border-radius:10px;
            padding:5px;
        }
       
        .profil_avatar {
          background-color: #CFDAFF;
          border: 2px solid #2456FF;
          -moz-border-radius:10px;
          -webkit-border-radius:10px;
          border-radius:10px;
          padding: 5px;
        }
       
        .profil_infos {
          background-color: #CFDAFF;
          border: 2px solid #2456FF;
          -moz-border-radius:10px;
          -webkit-border-radius:10px;
          border-radius:10px;
          padding: 5px;
        }
       
        .font_profil{
            background-color: #FFFFFF;
          -moz-border-radius:10px;
          -webkit-border-radius:10px;
          border-radius:10px;
          padding: 5px;
        }

*/FIN PROFIL*/


Merci d'avance à la personne qui m'aidera

Bonne soirée !

[Invité]

Bonjour,

J'ai modifiéé vos commentaires dans le CSS: ils doivent toujours être rédiger de la même façon:
/*le commentaire*/ .

Code:

/*soulignement*/
a {text-decoration:none;}

.tableau {border:8px solid #F08B8B;}

.présentation {
   margin-center:2px;
   border:#2456FF 5px solid;
   padding:5px;
   -moz-border-radius:10px;
   width:300px;}

.bg {
   border:3px solid #2456FF;
   background-color:#828BF5;}

/*INFOBULLES*/
.infobulle {
   position:relative;
   z-index:0;}

.infobulle:hover {
   background-color:transparent;
   z-index:50;}

.infobulle span {
   position:absolute;
   background-color:#000000;
   padding:5px;
   left:-1000px;
   visibility:hidden;
   color:#FFFFFF;}

.infobulle span img {
   border:1px;
   padding:5px;}

.infobulle:hover span {
   visibility:visible;
   top:7px;
   left:5px;
   width:150px;
   color:#0000ff;
   border:1px solid #ff0000;}

.onglet {
   float:left;
   padding:2px;
   margin-right:4px;
   margin-bottom:-1px;
   color:#000;
   background:#ffffff;
   border:1px solid #000000;
   cursor:pointer;
   width:18%;
   list-style:none;}

.onglet_selectionner { 
   float:left;
   padding:2px;
   margin-right:4px;
   margin-bottom:-1px;
   color:#000;
   background:#ffffff;
   border-top:1px solid #000000;
   border-right:1px solid #000000;
   border-left:1px solid #000000;
   border-bottom:none !important;
   cursor:pointer;
   width:18%;
   list-style:none;}

.onglet:hover {
   background:#9C1C56;}

.clear {clear:both;}

.contenu { 
   color:#000;
   background:#ffffff;
   border:1px solid #000000;
   padding:10px;
   list-style:none;}

#les_contenus,#les_onglets {width:100%;}

.over .cate1 {
   font-family:time new roman;
   letter-spacing:4px;
   background-color:#5a442d;
   background-image:url('http://host.image.files.free.fr/host/4a2c3f3c6d235backtitre.jpg');
   background-repeat:no-repeat;
   color:#ffebd1;
   text-align:center;
   padding:1px;
   margin:3px;
   margin-bottom: -5px;}


/*QEEL*/
.barre1 {
   background-color:#D9E5F5;
   border:1px #2D81EA solid;
   -moz-border-radius:5px 5px 5px 5px;
   height:40px;
   padding-right:12px;
   padding-left:14px;
   padding-bottom:3px;
   font-size:15px;
   font-weight:bold;
   text-align:left;
   text-decoration:none !important;
   height:auto;}
.statistiques {
   border:0px;
   background-repeat:no-repeat;
   background-position:center;
   height:200px;}
.groupes {
   background-color:#D9E5F5;
   border:1px #2D81EA dotted;
   -moz-border-radius:5px 5px 5px 5px;
   height:40px;
   padding-right:12px;
   padding-left:14px;
   padding-bottom:3px;
   font-size:15px;
   font-weight:bold;
   text-align:center;
   text-decoration:none !important;
   height: auto;}

/*PROFIL*/
.profil_speudo {
   background-color:#FFFFFF;
   border:2px solid #2456FF;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   padding:5px;}
.profil_avatar {
   background-color:#CFDAFF;
   border:2px solid #2456FF;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   padding:5px;}
.profil_infos {
   background-color:#CFDAFF;
   border:2px solid #2456FF;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   padding:5px;}
.font_profil {
   background-color:#FFFFFF;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   padding: 5px;}
/*FIN PROFIL*/

J'ai ajouté dans le code html,une balise </td> qui manquait après le tableau de l'infobulle:

Code:

<table width="100%" cellspacing="8px" cellpadding="0px">
<tr>
   <td colspan='width="50%"'>
      <center>
      <div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;">
         <div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">
             .Le Staff. ~
         </div>
         <div style="overflow: auto; width:98%; height:100px; text-align: justify;">
            <center>
            <table>
            <tr>
               <td>
                  <div class="infobulle">
                     <img src="http://i47.servimg.com/u/f47/14/37/81/10/ayu_bm15.jpg"/><span>Ayumu Yamazaki,<br/>Fondatrice.</span>
                  </div>
               </td>
            </tr>
            </table>
            </center>
         </div>
      </div>
      </center>
   </td>
   <td colspan='width="50%"'>
      <center>
      <div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;">
         <div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">
             .Bienvenue {USER&amp;#8288;NAME}. ~
         </div>
         <div style="overflow: auto; width:98%; height:100px; text-align: justify;">
            <center>Pour protéger les êtres magiques, Souchiro Tokaï créa une ville loin des humains. Ainsi, Dieux, Démons, Sorciers, Hybrides, Vampires et Elfes étaient enfin libérés de la persécution Seuls les personnes possédant des pouvoirs magiques peuvent recevoir la lettre d'admission. Alors, seriez vous les suivants ?</center>
         </div>
      </div>
      </center>
   </td>
   <td colspan='width="50%"'>
      <center>
      <div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;">
         <div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">
             .Prédéfinis. ~
         </div>
         <div style="overflow: auto; width:98%; height:100px; text-align: justify;">
            <center>ECRIRE ICI</center>
         </div>
      </div>
      </center>
   </td>
</tr>
<tr>
   <td colspan='width="20%"'>
      <center>
      <div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;">
         <div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">
             .Les ragots. ~
         </div>
         <div style="overflow: auto; width:98%; height:100px; text-align: justify;">
            <center>ECRIRE ICI</center>
         </div>
      </div>
      </center>
   </td>
   <td colspan='width="20%"'>
      <center>
      <div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;">
         <div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">
             .Les nouveautés. ~
         </div>
         <div style="overflow: auto; width:98%; height:100px; text-align: justify;">
            <center>ECRIRE ICI</center>
         </div>
      </div>
      </center>
   </td>
   <td colspan='width="20%"'>
      <center>
      <div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;">
         <div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">
             .La météo des rps. ~
         </div>
         <div style="overflow: auto; width:98%; height:100px; text-align: justify;">
            <center>ECRIRE ICI</center>
         </div>
      </div>
      </center>
   </td>
</tr>
<tr>
   <td colspan='width="20%"'>
      <center>
      <div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;">
         <div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">
             .Les top-sites. ~
         </div>
         <div style="overflow: auto; width:98%; height:100px; text-align: justify;">
            <center>ECRIRE ICI</center>
         </div>
      </div>
      </center>
   </td>
   <td colspan='width="20%"'>
      <center>
      <div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;">
         <div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">
             .Les partenaires. ~
         </div>
         <div style="overflow: auto; width:98%; height:100px; text-align: justify;">
            <center>ECRIRE ICI</center>
         </div>
      </div>
      </center>
   </td>
   <td colspan='width="20%"'>
      <center>
      <div style="background: #ffffff ;width: 300px;border: 3px #2456FF solid;-moz-border-radius: 10px 10px 10px 10px;">
         <div style="font-size: 22px; color: #2456FF; text-shadow: 1px 1px #000000;border-bottom: 2px #2456FF solid">
             .Les crédits. ~
         </div>
         <div style="overflow: auto; width:98%; height:100px; text-align: justify;">
            <center>ECRIRE ICI</center>
         </div>
      </div>
      </center>
   </td>
</tr>
</table>

Sur mon forum test, tout semble fonctionner correctement.

Cordialement.

[Ayumu Yamazaki]

Ah, je ne pensais pas qu'il fallait toujours avoir la même écriture sur le CSS :O

En tout cas, tout marche sur mon forum de test

Merci beaucoup Isolde !