Souci avec les info bulles

3 participants

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

Résolu Souci avec les info bulles

Message par Lily Jedusor 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

Lily Jedusor
****

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

http://specialis-revelio.forumactif.com/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lixyr Dim 2 Mar 2014 - 15:26

Bonjour, Lily Jedusor.

Il me faudrait le CSS qui va avec. Smile


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Souci avec les info bulles 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Souci avec les info bulles 3592387030 pour prévenir la modération.

Souci avec les info bulles Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

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

Résolu Re: Souci avec les info bulles

Message par Lily Jedusor 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

Lily Jedusor
****

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

http://specialis-revelio.forumactif.com/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

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

up  Very Happy 
Lily Jedusor

Lily Jedusor
****

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

http://specialis-revelio.forumactif.com/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lixyr 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 ?


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Souci avec les info bulles 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Souci avec les info bulles 3592387030 pour prévenir la modération.

Souci avec les info bulles Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

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

Résolu Re: Souci avec les info bulles

Message par Lily Jedusor 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

Lily Jedusor
****

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

http://specialis-revelio.forumactif.com/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

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

Petite remontée discrète du sujet  flower 
Lily Jedusor

Lily Jedusor
****

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

http://specialis-revelio.forumactif.com/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

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

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

Lily Jedusor
****

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

http://specialis-revelio.forumactif.com/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par MlleAlys 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

MlleAlys
Membre actif

Messages : 5767
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 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

Lily Jedusor
****

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

http://specialis-revelio.forumactif.com/
Lily Jedusor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci avec les info bulles

Message par Lixyr Mer 12 Mar 2014 - 14:35

Souci avec les info bulles Check10Bonjour,

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 Souci avec les info bulles Envoi10


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton Souci avec les info bulles 50378

A bientôt sur ForumActif Smile


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Souci avec les info bulles 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Souci avec les info bulles 3592387030 pour prévenir la modération.

Souci avec les info bulles Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.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

- Sujets similaires

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