Sujets similaires

Bonjour!
J'essaie de faire une page d'acceuil pour le forum de ma petite soeur. Elle voulait que cela soit divisé par des tableaux, et dans la section "Staff" des tableaux, elle voulait des infobulles avec une petite description des membres à l'intérieur.

Les infobulles fonctionnent très bien, je n'ai pas de problèmes. Le truc, c'est que lorsqu'une des trois infobulles s'affichent, elle reste dans le cadre du tableau, et elle ne s'affiche pas au complet. J'aimerais bien savoir si y a un moyen pour que l'infobulle ressorte du tableau et qu'elle ne reste pas coincé dans le cadre.

Voici l'adresse du forum: http://whatsleftbehind.forumactif.org/index.htm
Il faut survoler la troisième image dans "Kings and Queens" pour voir le problème

Pour t'aide convenablement, il nous faudrait le code HTML et le CSS de ton tableau Wink

BIG EDIT:

J'ai fait un petit ménage de mes codages pour que ce soit plus clair pour les autres et après avoir fait tout ça, je me suis rendue compte que j'ai du faire une fausse manœuvre, parce que je ne vois plus du tout mes infobulles, maintenant. Je vais devoir revoir ce qui ne fonctionne pas. En attendant, voici la version "propre" de mon code.

Code:: <table cellpadding="0" cellspacing="5" width="800" height="150">
<tr>
<td class="cadrage1"; width="33%">
   <center>
      <div style="background-color: #979598; text-align: center; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px;>
      <div style="margin:auto; text-align:center; width:100%">
         <font size="5">Kings and Queens</font>
      </div>
      </div>

      <div style=" -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;">
      <div style=height:150px;overflow:auto;"><br>
      <span style="font-size: 10px; line-height: normal">
         <div align="justify">
            <center>
               <table>
                  <tr>
                  <td>
                     <a class="infopa" href="google.ca" target="blank">
                     <div style="border: 5px #B5DB38 solid; width:55px ; -moz-border-radius: 10px">
                        <img src="http://img24.imageshack.us/img24/6929/ssssskv.jpg">
                     </div>
                     <span>
                        <font size="2"; align="center">NOM PRÉNOM</font><br>
                        <font size="1"; color="#FFFFFF"><i>Informations</i></font>
                     </span>
                     </a>
                  </td>
                  <td>
                     <a class="infopa" href="google.ca" target="blank">
                     <div style="border: 5px #B5DB38 solid; width:55px ; -moz-border-radius: 10px">
                        <img src="http://img24.imageshack.us/img24/6929/ssssskv.jpg">
                     </div>
                     <span>
                        <font size="2"; align="center">NOM PRÉNOM</font><br>
                        <font size="1"; color="#FFFFFF"><i>Informations</i></font>
                     </span>
                     </a>
                  </td>
                  <td>
                     <a class="infopa" href="google.ca" target="blank">
                     <div style="border: 5px #B5DB38 solid; width:55px ; -moz-border-radius: 10px">
                        <img src="http://img24.imageshack.us/img24/6929/ssssskv.jpg">
                     </div>
                     <span>
                        <font size="2"; align="center">NOM PRÉNOM</font><br>
                        <font size="1"; color="#FFFFFF"><i>Informations</i></font>
                     </span>
                     </a>
                  </td>
                  </tr>
               </table>
            </center>
         </div>
      </span>
      </div>
      </div>
   </center>
</td>

<td class="cadrage1"; width="34%">
   <center>
      <div style="background-color: #979598; text-align: center; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px;>
      <div style="margin:auto; text-align:center; width:100%">
         <font size="5">Just so you know</font>
      </div>
      </div>

      <div style=" -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;">
      <div style=height:150px;overflow:auto;"><br>
      <span style="font-size: 10px; line-height: normal">
         <div align="justify">
            <center>Nous demandons un minimum de 20 lignes par RP.
               Blablablablablablablablablabla
            </center>
         </div>
      </span>
      </div>
   </center>
</td>

<td class="cadrage1"; width="33%">
   <center>
      <div style="background-color: #979598; TEXT-ALIGN: center; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px;>
      <div style="margin:auto; text-align:center; width:100%">
         <font size="5">News</font>
      </div>
      </div>

      <div style=" -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;">
      <div style=height:150px;overflow:auto;"><br>
      <span style="font-size: 10px; line-height: normal">
         <div align="justify">
            <center>
               <marquee style="width: 180px; height: 120px" direction="up" onmouseover=this.stop(); onmouseout=this.start();                SCROLLAMOUNT=2>
                  Blbalblablablabla TEXTE QUI DEFILE
               </marquee>
            </center>
      </div>
      </span>
      </div>
      </div>
   </center>
</td>
</tr>
</table>

La section "Staff" dont je parle est celle qui pose problème. C'est ce petit "td" là:

Code:: <td class="cadrage1"; width="33%">
   <center>
      <div style="background-color: #979598; text-align: center; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px;>
      <div style="margin:auto; text-align:center; width:100%">
         <font size="5">Kings and Queens</font>
      </div>
      </div>

      <div style=" -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;">
      <div style=height:150px;overflow:auto;"><br>
      <span style="font-size: 10px; line-height: normal">
         <div align="justify">
            <center>
               <table>
                  <tr>
                  <td>
                     <a class="infopa" href="google.ca" target="blank">
                     <div style="border: 5px #B5DB38 solid; width:55px ; -moz-border-radius: 10px">
                        <img src="http://img24.imageshack.us/img24/6929/ssssskv.jpg">
                     </div>
                     <span>
                        <font size="2"; align="center">NOM PRÉNOM</font><br>
                        <font size="1"; color="#FFFFFF"><i>Informations</i></font>
                     </span>
                     </a>
                  </td>
                  <td>
                     <a class="infopa" href="google.ca" target="blank">
                     <div style="border: 5px #B5DB38 solid; width:55px ; -moz-border-radius: 10px">
                        <img src="http://img24.imageshack.us/img24/6929/ssssskv.jpg">
                     </div>
                     <span>
                        <font size="2"; align="center">NOM PRÉNOM</font><br>
                        <font size="1"; color="#FFFFFF"><i>Informations</i></font>
                     </span>
                     </a>
                  </td>
                  <td>
                     <a class="infopa" href="google.ca" target="blank">
                     <div style="border: 5px #B5DB38 solid; width:55px ; -moz-border-radius: 10px">
                        <img src="http://img24.imageshack.us/img24/6929/ssssskv.jpg">
                     </div>
                     <span>
                        <font size="2"; align="center">NOM PRÉNOM</font><br>
                        <font size="1"; color="#FFFFFF"><i>Informations</i></font>
                     </span>
                     </a>
                  </td>
                  </tr>
               </table>
            </center>
         </div>
      </span>
      </div>
      </div>
   </center>
</td>

Edit 2:

Problème 1: Bon, voilà, les infobulles fonctionnent, mais elles s'affichent SOUS les images, au lieu de DESSUS, comme ça le faisait avant. Ce qui fait que c'est encore pire que tout à l'heure en ce qui concerne mon deuxième problème.

Problème 2: Mon problème avec les tableaux est toujours présent. J'aimerais que les infobulles s'affichent en dehors du cadre du tableau, parce que là c'est l'horreur.

Le premier problème est causé par la ligne:

Code:: <div style=height:150px;overflow:auto;"><br>

Il faut retirer: overflow: auto;

Pour le second, il va me falloir le CSS de ton forum.

EDIT: Après vérification sur ton forum, je remarques que tu as réglé le second problème Wink

.

Oh merci énormément!

Pour le second problème, j'ai cherché un peu partout sur internet, et je pense que le seul moyen de le régler est de faire un deuxième code d'infobulle (nommé "infopa2") dans le CSS et de positionner la dernière infobulle (celle qui détruit complètement mon tableau) de manière à ce qu'elle reste dans le cadre, si j'ai bien compris Smile

Je vais donc faire de cette manière et si ça ne résous pas le problème, on vérifiera que j'ai pas loupé quelque chose dans mon CSS^^

EDIT: Après avoir enlevé le "overflow:auto;" tout s'est arrangé comme par magie et je n'ai même pas besoin de faire une seconde infobulle! Le problème venait donc de là! Je te remercie donc de tout mon coeur et tu peux classer mon sujet^^

Parfait, content d'avoir pu t'aider ! Bravo !

Je classe.

Infobulle dans un tableau petit souci

Infobulle dans un tableau petit souci

Sujets similaires

Sujets similaires

Partenaires Or