Problème avec les infobulles

2 participants

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

Résolu Problème avec les infobulles

Message par Jason75 Mer 25 Nov 2015 - 22:55

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>



Dernière édition par Jason75 le Ven 27 Nov 2015 - 0:41, édité 1 fois
avatar

Jason75
Nouveau membre

Messages : 12
Inscrit(e) le : 15/08/2015

http://pokemonaaml.superforum.fr/
Jason75 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les infobulles

Message par Self Jeu 26 Nov 2015 - 2:36

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 ?
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les infobulles

Message par Jason75 Jeu 26 Nov 2015 - 9:32

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 Smile

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 ************************/
avatar

Jason75
Nouveau membre

Messages : 12
Inscrit(e) le : 15/08/2015

http://pokemonaaml.superforum.fr/
Jason75 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les infobulles

Message par Self Jeu 26 Nov 2015 - 15:17

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 Wink .
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les infobulles

Message par Jason75 Jeu 26 Nov 2015 - 22:44

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

avatar

Jason75
Nouveau membre

Messages : 12
Inscrit(e) le : 15/08/2015

http://pokemonaaml.superforum.fr/
Jason75 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les infobulles

Message par Invité Jeu 26 Nov 2015 - 23:56

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

code a écrit:#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 Affirmatif
Anonymous

Invité
Invité


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

Résolu Re: Problème avec les infobulles

Message par Jason75 Ven 27 Nov 2015 - 0:41

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

Jason75
Nouveau membre

Messages : 12
Inscrit(e) le : 15/08/2015

http://pokemonaaml.superforum.fr/
Jason75 a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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