Problème avec les infobulles

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

Résolu Problème avec les infobulles

Message par Jason75 le 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://i199.photobucket.com/albums/aa174/Akemi-02/S2_zpse95e9b37.png" 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

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 le 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
+ Hyperactif +

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

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

Résolu Re: Problème avec les infobulles

Message par Jason75 le 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://i199.photobucket.com/albums/aa174/Akemi-02/S2_zpse95e9b37.png" 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://i199.photobucket.com/albums/aa174/Akemi-02/b4_zps09f68abd.jpg" 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 ************************/

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 le 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://i199.photobucket.com/albums/aa174/Akemi-02/S2_zpse95e9b37.png" 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://i199.photobucket.com/albums/aa174/Akemi-02/b4_zps09f68abd.jpg" 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
+ Hyperactif +

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

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

Résolu Re: Problème avec les infobulles

Message par Jason75 le 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


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 R-max le 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

R-max
# Tropactif #

Masculin
Messages : 1517
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les infobulles

Message par Jason75 le 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

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


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