Problème avec mon infobulle

[Acupa]

Bonjour et merci d'avance à ceux qui vont lire mon post.

Alors, je vais droit au but; ça fait je ne sais pas combien de temps que je suis exposée à problème avec une infobulle et je ne sais plus comment m'y prendre après maintes essais... Dans ma page d'accueil (enfin ce qu'il en est pour le moment, parce-que mon forum est en construction ^^') je souhaite y mettre des images (icones) et que lorsque on passe la souris sur celle-ci, une infobulle s'affiche.

Donc voilà ce qu'il en est aujourd'hui:

Spoiler:

Ensuite, quand je passe ma souris dessus, l'infobulle s'affiche comme ceci:

Spoiler:

Mais il y a quelquesproblèmes auquel je suis confrontés. --' Les voici:

Spoiler:

Et pour finir, voilà mon code:

Code:

   <tr style="border:2px none ;">
  <div style="margin:auto;text-align:center;width:100%"><font color="#787878"><font face="times new roman"><span style="font-size: 45px; line-height: normal">ONE DIRECTION</span></font></font></div>

  <div style="margin:auto;text-align:center;width:100%"><i><font color="#c4c4c4"><font face="times new roman"><span style="font-size: 20px; line-height: normal">notre boysband favoris</span></font></font></i></div>

  <div style="margin:auto;text-align:center;width:100%"><font color="white">-</font></div><div style="margin:auto;text-align:center;width:100%"><font face="times new roman"><span style="font-size: 15px; line-height: normal"><strong><a href="http://0nedirection.forumgratuit.org/f1-s-o-m-e-w-o-r-d-s?tid=45b0c59160f354be35bf7a411d8a278b" class="postlink">règlement</a> <font color="#C27840">✓</font> facebook <font color="#C27840">✓</font> twitter <font color="#C27840">✓</font> dernières nouvelles <font color="#C27840">✓</font> partenaires <font color="#C27840">✓</font></strong></span></font></div><div style="overflow: auto; width:98%; height:100px; text-align: justify;">

            <left>
            <table>
            <tr>
              <td>
                  <div class="infobulle">
                    <img src="http://i43.servimg.com/u/f43/16/73/69/09/111.jpg"/><span><span style="font-size: 10px; line-height: normal"><font face="tahoma">Zayn Jawaad Malik (Zain, de son vrai nom) est né le 12 janvier 1993 à Bradford, West Yorkshire, en Angleterre. Il a des origines pakistanaise par son père et anglaise par sa mère. Il les a suivies à Tong High School. Passionné de musique, il s’est inscrit  à X-Factor. La première fois, trop stressé, il ne se rend pas à l’audition. La deuxième fois, il interprète « Let Me Love You » de Mario. Recalé, il fonde « One Direction en 2011 avec quatre autres recalés de l’émission – Liam Payne, Niall Horan, Louis Tomlinson, Harry Styles.</font></span></span>
                  </div>
              </td>
            </tr>
            </table>
            </left>
        </div>
      </div>
      </left>
  </td>

Et mon css:

Code:

html #fa_ticker {
background-color: #ffffff;
}
/*##########Barre de navigation#########*/
ul.navlinks a.mainmenu {
    -moz-transition-duration: 500ms;
    color: #2653AE;
    font-size: 16px;
    outline: medium none;
    text-shadow: 0px 0px 0px #000000;
}
ul.navlinks a.mainmenu:hover {
    color: #432587;
    font-size: 16px;
    font-weight: 700;
    margin-left: 6px;
    margin-right: 4px;
    text-shadow: 0px 0px 0px;
}
a.mainmenu{
font-size: 16px;
font-family: times new roman;
font-style: italic;
color: #2653AE;
}

#search-box { display: none; }

.navbar ul{border-bottom:none;}

/*INFOBULLES*/
.infobulle {
  position:relative;
  z-index:0;}
 
.infobulle:hover {
  background-color:transparent;
  z-index: 0;}

.infobulle span {
  position:absolute;
  background-color:#ffffff;
  padding:0px;
  left:0px;
  visibility:hidden;
  color:#FFFFFF;}
 
.infobulle span img {
  border:1px;
  padding:5px;}
 
.infobulle:hover span {
  visibility:visible;
  top:15px;
  left:33px;
  width:350px;
  color:#4D4D4D;
  border:1px solid #c8c8c8;}

Voilà j'ai terminé, si je me suis mal exprimée, faites le moi savoir. Je voudrais une simple infobulle claire et lisible, sans curseur, lorsque je passe ma souris sur l'image.Excusez moi si j'ai posté au mauvais endroit ou alors pour l'organisation approximative de mon code... Je débute dans tout ça et je ne demande qu'à apprendre! En attendant je continue à chercher. Merci d'avoir lu jusqu'au bout et j'espère avoir votre aide. ;D

[nathy]

Bonjour Acupa
pour ton probleme avec ta barre grise au dessu de ton texte cela provient de ton dernier code celui si

Code:

.infobulle:hover span {
  visibility:visible;
  top:15px;
  left:33px;
  width:350px;
  color:#4D4D4D;
  border:1px solid #c8c8c8;}

border:1px solid #c8c8c8
ceci plus précisément donc soit tu le retire ou tu met la même couleur

pour l'autre problème je cherche encore après ton scrollbar

[Acupa]

Merci beaucoup Nathy, c'est déjà un problème en moins. ^^
Heureusement qu'il y a des personnes comme toi qui s'y connaissent.

[Acupa]

Ah bah voilà que maintenant mon îcone plus mon infobulle n'apparaissent plus. Ils s'affichent que si je passe ma souris dans le "vide". De plus j'ai remarqué que mon texte est en deux fois, c'est à dire, dans mon infobulle et l'autre en blanc tout le long du message d'accueil, si vous surlignez avec votre souris peut-être que vous le verrez. Et puis, c'est peut-être pour ça qu'il y a la barre de défilement. :/

[tupac]

Bonjour

Retire ceci ( overflow: auto; ) de ton code et règle la hauteur de ton contenu.

EDIT: retire aussi ceci

Code:

    </left>
        </div>
      </div>
      </left>
  </td>

qui traine a la fin de ton code tu n'en a pas besoin.

[Acupa]

Merci votre aide porte ses fruits! Les barres de défilements ne sont plus là.
Mais deux problèmes sont survenus. Je dois passer ma souris dans le "blanc" ("vide") pour que l'icone et l'infobulle s'affiche. Et puis j'ai une grosse "colonne blanche" qui traverse mon forum, cette colonne c'est mon texte de l'infobulle.
Voir ici:

Spoiler:

On va finir par le régler ce problème, grr. x)
Merci encore.

[Acupa]

J'ai réglé le problème pour mon icone, il s'affiche, quand on passe la souris dessus, il y a correctement mon infobulle. Maintenant il faut juste trouver comme enlever cette "colonne blanche" qui est mon texte de mon infobulle. Puis ce sera parfait!

[nathy]

de rien

il faudrait que tu remet ici ton code de ta page d'accueil car le problème vient de la je pense

Tupac toujours avec de bon conseil ^^ j'en n'etait sur que c'etait overflow^^

[Acupa]

Oui bonne idée, tenez voici le code, depuis tout à l'heure je cherche la dedans, mais mon cerveau surchauffe. x)

Code:

   <tr style="border:2px none ;">
  <div style="margin:auto;text-align:center;width:100%"><font color="#787878"><font face="times new roman"><span style="font-size: 45px; line-height: normal">ONE DIRECTION</span></font></font></div>

  <div style="margin:auto;text-align:center;width:100%"><i><font color="#c4c4c4"><font face="times new roman"><span style="font-size: 20px; line-height: normal">notre boysband favoris</span></font></font></i></div>

  <div style="margin:auto;text-align:center;width:100%"><font color="white">-</font></div><div style="margin:auto;text-align:center;width:100%"><font face="times new roman"><span style="font-size: 15px; line-height: normal"><strong><a href="http://0nedirection.forumgratuit.org/f1-s-o-m-e-w-o-r-d-s?tid=45b0c59160f354be35bf7a411d8a278b" class="postlink">règlement</a> <font color="#C27840">✓</font> facebook <font color="#C27840">✓</font> twitter <font color="#C27840">✓</font> dernières nouvelles <font color="#C27840">✓</font> partenaires <font color="#C27840">✓</font></strong></span></font></div><div style="width:98%; height:100px; text-align: justify;"><div style="margin:auto;text-align:center;width:100%"><font color="white">-</font></div>

            <center>
            <table>
            <tr>
              <td>
                  <div class="infobulle">
                    <img src="http://i43.servimg.com/u/f43/16/73/69/09/111.jpg"/>
<span><span style="font-size: 10px; line-height: normal">
<font face="tahoma"><div align="justify"> Zayn Jawaad Malik (Zain, de son vrai nom) est né le 12 janvier 1993 à Bradford, West Yorkshire, en Angleterre. Il a des origines pakistanaise par son père et anglaise par sa mère. Il les a suivies à Tong High School. Passionné de musique, il s’est inscrit  à X-Factor. La première fois, trop stressé, il ne se rend pas à l’audition. La deuxième fois, il interprète « Let Me Love You » de Mario. Recalé, il fonde « One Direction en 2011 avec quatre autres recalés de l’émission – Liam Payne, Niall Horan, Louis Tomlinson, Harry Styles.</div></font></span></span>

                  </div>
              </td>
            </tr>
            </table>

En haut j'ai un <center> Je me suis dis qu'avec l'image, il centrait aussi le texte de la "colonne blanche", mais même en l'enlevant ça n'a rien fait.

Je peux enlever le <tr style="border:2px none ;"> tout en haut? Désolée c'est peut-être une question idiote. ^.^"

[nathy]

hello

Alors j'ai mis ton code sur mon forum teste et moi sa s'affiche normal

Spoiler:

as tu donné tout ton code ?

[Acupa]

Je t'ai donné le code de "généralité". Attends je vais essayé, peut-être que ça bug avec Google Chrome. Est-ce que tu penses que aussi que mon "mode" phpBB3 qui joue? Je voulais me mettre en phpBB2 mais ça m'effacerait tout. :/

[nathy]

Et bien déjà moi je suis phpbb2 et google chrome
et tout s'affiche normalement

pour les question phpbb2 ou 3 je ne suis pas encore calé mais oui je pense que sa va changer pas mal de chose

[Acupa]

Hum sûrement. Mais cette "colonne blanche" s'est mise quand j'ai tripatouillé pour mes barres de défilements que je ne voulais pas.

[Acupa]

Bon et bien ce dernier problème persiste. Peut-être que tu pourrais m'envoyer le code et le css, pour tout recommencer pour cette infobulle? ^^'

[nathy]

j'ai juste remis les code que tu a donne moi

Code:

 <tr style="border:2px none ;">
  <div style="margin:auto;text-align:center;width:100%"><font color="#787878"><font face="times new roman"><span style="font-size: 45px; line-height: normal">ONE DIRECTION</span></font></font></div>
 
  <div style="margin:auto;text-align:center;width:100%"><i><font color="#c4c4c4"><font face="times new roman"><span style="font-size: 20px; line-height: normal">notre boysband favoris</span></font></font></i></div>
 
  <div style="margin:auto;text-align:center;width:100%"><font color="white">-</font></div><div style="margin:auto;text-align:center;width:100%"><font face="times new roman"><span style="font-size: 15px; line-height: normal"><strong><a href="http://0nedirection.forumgratuit.org/f1-s-o-m-e-w-o-r-d-s?tid=45b0c59160f354be35bf7a411d8a278b" class="postlink">règlement</a> <font color="#C27840">✓</font> facebook <font color="#C27840">✓</font> twitter <font color="#C27840">✓</font> dernières nouvelles <font color="#C27840">✓</font> partenaires <font color="#C27840">✓</font></strong></span></font></div><div style="width:98%; height:100px; text-align: justify;"><div style="margin:auto;text-align:center;width:100%"><font color="white">-</font></div>
 
            <center>
            <table>
            <tr>
              <td>
                  <div class="infobulle">
                    <img src="http://i43.servimg.com/u/f43/16/73/69/09/111.jpg"/>
<span><span style="font-size: 10px; line-height: normal">
<font face="tahoma"><div align="justify"> Zayn Jawaad Malik (Zain, de son vrai nom) est né le 12 janvier 1993 à Bradford, West Yorkshire, en Angleterre. Il a des origines pakistanaise par son père et anglaise par sa mère. Il les a suivies à Tong High School. Passionné de musique, il s’est inscrit  à X-Factor. La première fois, trop stressé, il ne se rend pas à l’audition. La deuxième fois, il interprète « Let Me Love You » de Mario. Recalé, il fonde « One Direction en 2011 avec quatre autres recalés de l’émission – Liam Payne, Niall Horan, Louis Tomlinson, Harry Styles.</div></font></span></span>
 
                  </div>
              </td>
            </tr>
            </table>


css

Code:

html #fa_ticker {
background-color: #ffffff;
}
/*##########Barre de navigation#########*/
ul.navlinks a.mainmenu {
    -moz-transition-duration: 500ms;
    color: #2653AE;
    font-size: 16px;
    outline: medium none;
    text-shadow: 0px 0px 0px #000000;
}
ul.navlinks a.mainmenu:hover {
    color: #432587;
    font-size: 16px;
    font-weight: 700;
    margin-left: 6px;
    margin-right: 4px;
    text-shadow: 0px 0px 0px;
}
a.mainmenu{
font-size: 16px;
font-family: times new roman;
font-style: italic;
color: #2653AE;
}
 
#search-box { display: none; }
 
.navbar ul{border-bottom:none;}
 
/*INFOBULLES*/
.infobulle {
  position:relative;
  z-index:0;}
 
.infobulle:hover {
  background-color:transparent;
  z-index: 0;}
 
.infobulle span {
  position:absolute;
  background-color:#ffffff;
  padding:0px;
  left:0px;
  visibility:hidden;
  color:#FFFFFF;}
 
.infobulle span img {
  border:1px;
  padding:5px;}
 
.infobulle:hover span {
  visibility:visible;
  top:15px;
  left:33px;
  width:350px;
  color:#4D4D4D;
  }

j'ai rien changer car moi tout etait normal

[Acupa]

Ouki merci beaucoup!

[nathy]

ya pas de quoi bonne continuation