Souci avec les info bulles

[Lily Jedusor]

Bonjour !

Depuis un moment déjà, mes infos bulles ne fonctionnent plus sur ma page d'accueil.
J'avais modifié un truc dessus et en validant, les infos bulles ont disparu. Je ne sais pas pourquoi, ni comment les faire revenir... Je précise que je n'ai pas changé le code - sachant que sur ma PA, il y a pleins d'espaces entre les balises - de mes infos bulles qui est le suivant :

Code:

<table><tbody><tr><td><a class="info"><span style="color: rgb(221, 196, 113);"></span></a> <div style="text-align: center; background-image: url(" http:="http://i76.servimg.com/u/f76/11/72/28/04/04_wir10.gif" );="" height:="" 50px;="" width:="" border-width:="" 2px="" 0px="" 2px;="" border-style:="" solid;="" border-color:="" rgb(56,="" 6,="" 6);"=""></div><a class="info"><span style="color: rgb(221, 196, 113);"></span><span></span></a> <table style="width: 100px;" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><span style="color: rgb(71, 148, 57);">SERPENTARD<br />[0 élève, 100 points]</span> </td></tr><tr align="center"></tr></tbody></table><a class="info"><span></span></a> </td><td><a class="info"><span style="color: burlywood;"></span></a> <div style="text-align: center; background-image: url(" http:="" img526.imageshack.us="" img526="" 992="" gryffondork.png");="" height:="" 50px;="" width:="" border-width:="" 2px="" 0px="" 2px;="" border-style:="" solid;="" border-color:="" rgb(56,="" 6,="" 6);"=""></div><a class="info"><span style="color: burlywood;"></span><span></span></a> <table style="width: 100px;" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><span style="color: rgb(191, 57, 57);">GRYFFONDOR<br />[0 élève, 120 points]</span> </td></tr><tr align="center"></tr></tbody></table><a class="info"><span></span></a> </td><td><a class="info"><span style="color: burlywood;"></span></a> <div style="text-align: center; background-image: url(http://i76.servimg.com/u/f76/11/72/28/04/01_wir10.gif" );="" height:="" 50px;="" width:="" border-width:="" 2px="" 0px="" 2px;="" border-style:="" solid;="" border-color:="" rgb(56,="" 6,="" 6);"=""></div><a class="info"><span style="color: burlywood;"></span><span></span></a> <table style="width: 100px;" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><span style="color: rgb(65, 86, 186);">SERDAIGLE<br />[1 élève, 100 points]</span></td></tr><tr align="center"></tr></tbody></table><a class="info"><span></span></a> </td><td><a class="info"><span style="color: burlywood;"></span></a> <div style="text-align: center; background-image: url(" http:="" img41.imageshack.us="" img41="" 6262="" pouffy.png");="" height:="" 50px;="" width:="" border-width:="" 2px="" 0px="" 2px;="" border-style:="" solid;="" border-color:="" rgb(56,="" 6,="" 6);"=""></div><a class="info"><span style="color: burlywood;"></span><span></span></a> <table style="width: 100px;" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><span style="color: rgb(209, 182, 6);">POUFSOUFFLE<br />[0 élève, 100 points]</span> </td></tr><tr align="center"></tr></tbody></table><a class="info"><span></span></a> </td></tr></tbody></table>

Je ne sais pas quoi faire pour les faire réapparaitre je viens donc à vous. Si vous avez une idée de comment faire..

Merci d'avance
Lily J.

[Lixyr]

Bonjour, Lily Jedusor.

Il me faudrait le CSS qui va avec.

[Lily Jedusor]

Oups, pardon pour cet oubli...

Voilà

Code:

a.info { /*infobullePA*/
  position: relative;
  color: #DB9744;
  font-size:10px;
  text-decoration: none;}
a.info span {display: none; /* on masque l'infobulle */}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */}
a.info:hover span {
  width:200px;
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  top: -50px; /* on positionne notre infobulle */
  left: 20px;
  background-color: #301B07;
  color: #DB9744;
 text-align:center;
 padding: 2px;
  border: 1px solid #F3D25F;}


[Lily Jedusor]

up   

[Lixyr]

Merci.

Alors, si j'ai bien saisi, normalement, il y a une image pour chaque maison, et lorsqu'on passe la souris sur l'une des images, un texte en couleur apparait, par exemple :

SERPENTARD
[0 élève, 100 points]

C'est bien ça ?

[Lily Jedusor]

C'est tout à fait ça... sauf que depuis quelque temps bah j'ai plus ça... j'ai juste le texte comme sur ma PA (http://avadakedavra.forumgratuit.fr/) et pourtant, pour les PV juste en dessous, les infobulles fonctionnent... or c'est exactement le même code... donc je comprends pas pourquoi...

[Lily Jedusor]

Petite remontée discrète du sujet   

[Lily Jedusor]

Nouvelle petite remontée discrète   

[MlleAlys]

Bonjour,
le problème vient du fait qu'il y ai une balise div (pour l'image) dans les balises a.info, et également le tableau dans le span. Il y a eu des soucis aussi dans le style des div, ce qui fait qu'elles ne s'affichent plus (un problème de guillemets très certainement.
Essayez avec ces codes :

Code:

<table>
   
   <tbody>
      
      <tr>
         
         <td>
            
            <div class="info">
               
               <div style="text-align: center; background-image: url(http://i76.servimg.com/u/f76/11/72/28/04/04_wir10.gif); height:50px; width:50px; border-width:2px 0px 2px; border-style:solid; border-color: rgb(56,6,6);">
               </div>
                <span style="color: rgb(71, 148, 57); "> SERPENTARD <br />[0 élève, 100 points] </span>
            </div>
            
         </td>
         
         <td>
            
            <div class="info">
               
               <div style="text-align: center; background-image: url(URL); height:50px; width:50px; border-width:2px 0px 2px; border-style:solid; border-color: rgb(56,6,6);">
               </div>
                <span style="color: rgb(191, 57, 57); "> GRYFFONDOR <br />[0 élève, 120 points] </span>
            </div>
            
         </td>
         
         <td>
            
            <div class="info">
               
               <div style="text-align: center; background-image: url(http://i76.servimg.com/u/f76/11/72/28/04/01_wir10.gif); height:50px; width:50px; border-width:2px 0px 2px; border-style:solid; border-color: rgb(56,6,6);">
               </div>
                <span style="color: rgb(65, 86, 186);"> SERDAIGLE <br />[1 élève, 100 points] </span>
            </div>
            
         </td>
         
         <td>
            
            <div class="info">
               
               <div style="text-align: center; background-image: url(URL); height:50px; width:50px; border-width:2px 0px 2px; border-style:solid; border-color: rgb(56,6,6);">
               </div>
                <span style="color: rgb(209, 182, 6);"> POUFSOUFFLE <br />[0 élève, 100 points] </span>
            </div>
            
         </td>
         
      </tr>
      
   </tbody>
</table>

(j'ai retiré le tableau dans les span, corrigé les div (mais il faut ajouter les images de deux maisons, je n'ai pas réussi à les récupérer à partir du code donné), et changé le a.info en div.info pour qu'il d'y ait plus de souci avec la div à l'intérieur. Du coup, j'ai également retiré les "a" devant .info dans le css :

Code:

.info { /*infobullePA*/
    position: relative;
    color: #DB9744;
    font-size:10px;
    text-decoration: none;
}
.info span {
    display: none; /* on masque l'infobulle */
}
.info:hover {
    background: none; /* correction d'un bug IE */
    cursor: help; /* on change le curseur par défaut en curseur d'aide */
    z-index:5;
}
.info:hover span {
    width:200px;
    display: block; /* on affiche l'infobulle */
    position: absolute;
    top: 50px; /* on positionne notre infobulle */
    left: 0px;
    background-color: #301B07;
    color: #DB9744;
    text-align:center;
    padding: 2px;
    border: 1px solid #F3D25F;
}

Il faudra surement corrigé quelques détails, mais est-ce que ça fonctionne ?

[Lily Jedusor]

Ça fonctionne parfaitement :)Merci pour ton aide, je devenais chèvre avec ce souci.
Ce que je ne comprends pas c'est que le code fonctionnait deux lignes en dessous avec les Postes Vacants... enfin le principal c'est que ce soit réglé.

Merci beaucoup !
Lily J.

[Lixyr]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif