Problème avec les infobulles

[Jason75]

Bonjour,

J'ai un problème avec un code pour un PA, http://pokemonnrpg.forumactif.org/ , il s'agit d'un forum test, je n'arrive pas a mettre en place mes infobulle et je ne trouve pas ou et l'erreur, ma CSS et ma PA sont modifié

Code:

<!--    Infobulle 1    -->   
                              <div class="infobulle">
                                  <img src="http://illiweb.com/fa/pbucket.gif" style="width: 30px;" class="transparence" /> 
                                 <!--    Intérieur de l'infobulle 1    --> <span></span> 
                                 <center>
                                     Bella 
                                 </center><span> </span> 
                                 <center>
                                      Admin <br /><br /><a href="http://pokemonaaml.superforum.fr/privmsg?mode=post&u=486">Lui envoyé un MP</a><br /><a u486"="" pokemonaaml.superforum.fr="">Voir son Profil</a> 
                                 </center><span></span> 
                              </div>


[Self]

Bonjour,

Pourriez vous dans un premier temps nous donner le code HTML entier, du moins de la partie concernée et le code CSS associé, je vois dans la console plusieurs erreurs dans le HTML au niveau des liens.
Pou être sur de bien avoir compris, les liens doivent être présents dans l'infobulle au passage de la souris sur l'avatar ?

[Jason75]

bien voici le code html complet de ma PA

Code:

<div id="en_tete">                                                                                                                                            
   <table cellpadding="0" cellspacing="6" style="margin: auto; width: 100%;">                                                                                                                                       
      <tbody>                                                        
         <tr>
                                                                 
            <td style="width: 280px;">
                                                                    
               <div class="interieur">
                                                                                                 
                  <h1 class="titrepa">
                                                     Les membres du Staff                             
                  </h1>
                                                                                                                                                             
                  <!--                                      staff début                                        -->                                            <tb></tb>                           
                  <table style="margin: auto;">
                                                                                                                          
                     <tbody>
                                                                       
                        <tr>
                                                                          
                           <td>
                                                                                                                   
                              <!--                                    infobulle 1                                      -->                                                                       
                              <!--                      Infobulle 1                      -->                     
                              <div class="infobulle">
                                                   <img src="http://illiweb.com/fa/pbucket.gif" style="width: 30px;" class="transparence" />                   
                                 <!--                      Intérieur de l'infobulle 1                      --> <span></span>                   
                                 <center>
                                                      Bella                   
                                 </center><span> </span>                   
                                 <center>
                                                        Admin   
                                 </center>
                                      
                                 <center>
                                        <br /><a href="http://pokemonaaml.superforum.fr/privmsg?mode=post&u=486">Lui envoyé un MP</a><br /><a u486"="" pokemonaaml.superforum.fr="">Voir son Profil</a>                   
                                 </center><span></span>                   
                              </div>
                                                                             
      <!--                          Fin de l'intérieur de l'infobulle 1 --!>                                                                       
                           </td>                             <td>
<!--            Infobulle 2            -->                                                                       
                              <div class="infobulle">
                                                                                                     <img src="http://i58.servimg.com/u/f58/15/20/24/15/s110.png" style="width: 30px;" class="transparence" />                                               
                                 <!--                        Intérieur de l'infobulle 2                  --> <span></span>                                                                     
                                 <center>
                                                                                                          Jason75                                                                     
                                 </center><a><span> </span>                                                            </a>         
                                 <center>
                                              <a>                                                            Admin<br /><br /></a><a "="" privmsg?mode="post&u=1142" pokemonaaml.superforum.fr="">Lui envoyé un MP</a><br /><a href="http://pokemonaaml.superforum.fr/u1142">Voir son Profil</a><a>                </a>           
                                    <center>
                                                   <span> </span>                                                                     
                                    </center><a></a>           
                                 </center>
                                                        
                              </div><a>                                                                                                                                                     
                                 <!--      -              Fin de l'intérieur de l'infobulle 2        -->                                                          </a>           
                           </td>                                               
                           <td>                                                  
                           </td>                                                  
                           <td>                                                                                                                                                                
                              <!--                    Infobulle3      -              -->                                                                           
                              <div class="infobulle">
                                                                                                     <img src="http://illiweb.com/fa/pbucket.gif" style="width: 30px;" class="transparence" />                                                                     
                                 <!--                Intérieur de l'infobulle 3                  --> <span></span>                                                                     
                                 <center>
                                                                                                          Kitty                                                                     
                                 </center><span> </span>                                                                     
                                 <center>
                                                                                                          Admin<br /><br /><a href="http://pokemonaaml.superforum.fr/privmsg?mode=post&u=620">Lui envoyé un MP</a><br /><a href="http://pokemonaaml.superforum.fr/u620">Voir son Profil</a>                                                                     
                                 </center><span></span>                                                                     
                              </div>
                                                                                                                                                                         
                              <!--                                                                        Fin de l'int?eur de l'infobulle 3                                                                        -->                                                                     
                     <td><td>
<!--                              Infobulle4                                                      --!>                                                                       
                              <div class="infobulle">
                                                                                                     <img src="http://i58.servimg.com/u/f58/15/20/24/15/s310.png" style="width: 30px;" class="transparence" />                                                                     
                  <!--        Intérieur de l'infobulle 4      --!>                                                                   
                                 <center>
                                                                                    Lolo57<span> </span>                                                                     
                                    <center>
                                                                                                             Admin<br /><br /><a href="http://disilra.super-forum.net/privmsg?mode=post&u=32">Lui envoyé un MP</a><br /><a href="http://disilra.super-forum.net/u32">Voir son Profil</a>                                                                     
                                    </center><span></span>                                  </center>
                                                 </div>
<!--                      Fin de l'intérieur de l'infobulle 4                          --!>                                                                     
                           </td></tr>
                                          </tbody>
                                                         </table>
                                <!--            staff fin              -->                                                                     
               

Voila, j'espère que vous avez tout et que j'ai bien répondu

Code:

************************************** PAGE D'ACCUEIL DEBUT************************/
  #en_tete{
  width:1020px;
  min-height:550px;
  background-image: url('http://i68.servimg.com/u/f68/11/16/32/93/body-c10.jpg');
  height:auto;
  color: #21253E;
  font-family: Verdana;
      margin:auto;font-size: 13px;
  }
#en_tete a{
text-decoration: none;
color : #F0F9F9;
text-align: center;
}
#en_tete a:hover{
text-decoration: underline;
color : #D85C5C;
}
#en_tete tr{
  vertical-align:top;
  }
 
 
#en_tete .titrepa {
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
font-size: 14px;
text-align : center ;
font-weight: bold;
letter-spacing: 1px;
padding-left: 20px;
padding-right: 3px;
padding-bottom: 3px;
padding-top: 3px;
margin-left:12px;
margin-right:12px;
margin-top: 3px;
behavior: url(http://kiri84.free.fr/PIE.htc);
color:#F2A591;
text-shadow: 2px 2px 2px #0B0100;
font-variant: small-caps;
-moz-box-shadow: 1px 1px 2px #651F13;
box-shadow: 1px 1px 2px #651F13;
  background-image: url('http://i68.servimg.com/u/f68/11/16/32/93/body-c10.jpg');
}

#en_tete .interieur {
-moz-box-shadow: 1px 1px 2px #651F13;
box-shadow: 1px 1px 2px #651F13;
border: 1px solid #1a1a1a;
padding: 10px;  min-height:100px;
margin: 8px; color: #ffffff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
behavior: url(http://kiri84.free.fr/PIE.htc);
background-image:url("http://i68.servimg.com/u/f68/11/16/32/93/body-c10.jpg");
}
#en_tete #liste{
  text-align:left;
  margin-left:-25px;
  font-size:12px;
  padding-left: -32px; color: #D85C5C;
  }
#en_tete .date {
font-size: 13px;
color :#F0F9F9;
text-shadow: 2px 2px 2px #1F233E;
}
#en_tete img {
  border: none;          /* Ne pas entourer les images, même s'ils contiennent des liens */
  vertical-align: middle; /* Dans le cas d'une icône suivie d'un texte, par exemple      */
}
 
#en_tete .infobulle{
    position: relative;
    z-index: 0;}

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

#en_tete .infobulle span{
    position: absolute;
    background-color: #BFD7E0;
    padding: 2px;
    left: -1000px;
    visibility: hidden;
    color: #024167;}

 #en_tete .infobulle span img{
    border: 2px;
    padding: 5px;}

#en_tete .infobulle:hover span{
    visibility: visible;
    top: 50px;
    left: 15px;
    width: 130px ;
    color:#21253E;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; border: 1px solid #1a1a1a;
behavior: url(http://kiri84.free.fr/PIE.htc);
background-image:url("http://i68.servimg.com/u/f68/11/16/32/93/body-c10.jpg");
 }

/************************************** PAGE D'ACCUEIL FIN ************************/

[Self]

Bonjour,

Pour le HTML changez le à partir du commentaire <!-- staff début --> jusqu'au commentaire <!-- staff fin --> par :

Code:

<!--                      staff début                      -->
<table style="margin: auto;">
   <tbody>
      <tr>
         <td>
            <!--                      Infobulle 1                      -->
            <div class="infobulle">
               <img src="http://illiweb.com/fa/pbucket.gif" style="width: 30px;" class="transparence"/>
               <!--                      Intérieur de l'infobulle 1                      -->
               <span>
                  Bella<br/>
                  Admin<br/>
                  <a href="/privmsg?mode=post&u=486">Lui envoyé un MP</a><br/><a href="/u486">Voir son Profil</a>
               </span>
               <!--                          Fin de l'intérieur de l'infobulle 1                      -->
            </div>
         </td>
         <td>
            <!--                      Infobulle 2                      -->
            <div class="infobulle">
               <img src="http://i58.servimg.com/u/f58/15/20/24/15/s110.png" style="width: 30px;" class="transparence"/>
               <!--                      Intérieur de l'infobulle 2                      -->
               <span>
                  Jason75<br/>
                  Admin<br/>
                  <a href="/privmsg?mode=post&u=1142">Lui envoyé un MP</a><br/><a href="/u1142">Voir son Profil</a>
               </span>
               <!--                      Fin de l'intérieur de l'infobulle 2                      -->
            </div>
         </td>
         <td>
            <!--                      Infobulle3                      -->
            <div class="infobulle">
               <img src="http://illiweb.com/fa/pbucket.gif" style="width: 30px;" class="transparence"/>
               <!--                      Intérieur de l'infobulle 3                      -->
               <span>
                  Kitty<br/>
                  Admin<br/>
                  <a href="/privmsg?mode=post&u=620">Lui envoyé un MP</a><br/><a href="/u620">Voir son Profil</a>
               </span>
               <!--                      Fin de l'intérieur de l'infobulle                      -->
            </div>
         </td>
         <td>
            <!--                              Infobulle4                                                      -->
            <div class="infobulle">
               <img src="http://i58.servimg.com/u/f58/15/20/24/15/s310.png" style="width: 30px;" class="transparence"/>
               <!--                      Intérieur de l'infobulle 4                      -->
               <span>
                  Lolo57<br/>
                  Admin<br/>
                  <a href="/privmsg?mode=post&u=32">Lui envoyé un MP</a><br/><a href="/u32">Voir son Profil</a>
               </span>
               <!--                      Fin de l'intérieur de l'infobulle 4                      -->
            </div>
         </td>
      </tr>
   </tbody>
</table>
<!--                      staff fin                      -->

Puis dans le CSS changez seulement ce passage :

Code:

#en_tete .infobulle span{
    position: absolute;
    background-color: #BFD7E0;
    padding: 2px;
    left: -1000px;
    visibility: hidden;
    color: #024167;}

par :

Code:

#en_tete .infobulle span {
   display:inline-block;
   position:absolute;
   background-color:#BFD7E0;
   padding:2px;
   left:-1000px;
   visibility:hidden;
   text-align:center;
   color: #024167;
}

Le tout devrait bien fonctionner après ça .

[Jason75]

Bonsoir, je viens de changer comme vous m'avez dis de le faire mais cela ne fonctionne pas (suis maudit ^^)

Erreur

Erreur détectée
Nous avons compté un nombre différent de "{" et de "}". Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

il me met quand je valide ma CSS

[Invité]

bonsoir il y a surement un oublie , un mauvais copier collé des codes css fournie par SeLf.....

#en_tete .infobulle span {
display:inline-block;
position:absolute;
background-color:#BFD7E0;
padding:2px;
left:-1000px;
visibility:hidden;
text-align:center;
color: #024167;
}

vérifier les parenthèse en rouge une en ouverture ,et une en fermeture

[Jason75]

Bonsoir, en fait, j'ai trouver l'erreur et les infobulles marchent tres bien via vos corrections merci beaucoup et problèmes résolu