Souci avec les info bulles

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

Résolu Souci avec les info bulles

Message par Lily Jedusor le Sam 1 Mar 2014 - 18:28

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.


Dernière édition par Lily Jedusor le Mer 12 Mar 2014 - 16:24, édité 1 fois

Lily Jedusor
****

Féminin
Messages : 243
Inscrit(e) le : 11/08/2009

http://avadakedavra.forumgratuit.fr/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lixyr le Dim 2 Mar 2014 - 15:26

Bonjour, Lily Jedusor.

Il me faudrait le CSS qui va avec. Smile





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lily Jedusor le Dim 2 Mar 2014 - 17:36

Oups, pardon pour cet oubli...

Voilà Smile

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

Féminin
Messages : 243
Inscrit(e) le : 11/08/2009

http://avadakedavra.forumgratuit.fr/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lily Jedusor le Lun 3 Mar 2014 - 18:04

up  Very Happy 

Lily Jedusor
****

Féminin
Messages : 243
Inscrit(e) le : 11/08/2009

http://avadakedavra.forumgratuit.fr/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lixyr le Lun 3 Mar 2014 - 20:59

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 ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lily Jedusor le Mar 4 Mar 2014 - 14:22

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

Féminin
Messages : 243
Inscrit(e) le : 11/08/2009

http://avadakedavra.forumgratuit.fr/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lily Jedusor le Jeu 6 Mar 2014 - 13:41

Petite remontée discrète du sujet  flower 

Lily Jedusor
****

Féminin
Messages : 243
Inscrit(e) le : 11/08/2009

http://avadakedavra.forumgratuit.fr/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lily Jedusor le Dim 9 Mar 2014 - 8:25

Nouvelle petite remontée discrète  ::pourtoi:: 

Lily Jedusor
****

Féminin
Messages : 243
Inscrit(e) le : 11/08/2009

http://avadakedavra.forumgratuit.fr/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par MlleAlys le Dim 9 Mar 2014 - 11:38

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 ?

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: Souci avec les info bulles

Message par Lily Jedusor le Mar 11 Mar 2014 - 19:32

Ç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.

Lily Jedusor
****

Féminin
Messages : 243
Inscrit(e) le : 11/08/2009

http://avadakedavra.forumgratuit.fr/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lixyr le Mer 12 Mar 2014 - 14:35

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 résolu
  • 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 Smile





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr 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