Problème avec l'infobulle :/

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec l'infobulle :/

Message par Ayumu Yamazaki le Sam 10 Déc 2011 - 19:13

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 Smile

Bonne soirée !


Dernière édition par Ayumu Yamazaki le Dim 11 Déc 2011 - 17:24, édité 1 fois

Ayumu Yamazaki
Nouveau membre

Féminin
Messages : 5
Inscrit(e) le : 01/06/2011

http://academie-hotona.forumactif.org/
Ayumu Yamazaki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec l'infobulle :/

Message par Invité le Dim 11 Déc 2011 - 13:00

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec l'infobulle :/

Message par Ayumu Yamazaki le Dim 11 Déc 2011 - 17:23

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 Smile

Merci beaucoup Isolde !

Ayumu Yamazaki
Nouveau membre

Féminin
Messages : 5
Inscrit(e) le : 01/06/2011

http://academie-hotona.forumactif.org/
Ayumu Yamazaki a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum