Problème avec les infobulles

[mama3802]

Bonjour =),

J'ai mis ceci dans mon code HTML pour la partie infobulles:

Code:

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <table><tr><td align="left"> <div class="infobulle">
  <img src="http://img49.xooimage.com/files/9/a/5/jmo-2083a0f.jpg"/>
      <span>
      <center> Administratrice </center><img src="http://img45.xooimage.com/files/1/7/3/1-85-2080366.jpg" /> <center> [B]rooklyn </center>
        </span>
<div class="infobulle">
  <img src="http://img45.xooimage.com/files/1/4/e/lisa-2083a2c.jpg"/>
      <span>
      <center> Administratrice </center><img src="http://img49.xooimage.com/files/1/5/1/lisae11_verbal_judo-2083a35.jpg" /><center> Marine </center>
        </span>
</div></td></tr></table> </span></td>

Voici mon code en entier:

Code:

<table class="forumline table1 bg3" cellspacing="1" width="100%"><tbody><th colspan="1" rowspan="1" class="thTop forabg" width="28%">Nos Boutons</th><th colspan="1" rowspan="1" class="thTop forabg" width="43%">A faire</th><th colspan="1" rowspan="1" class="thTop forabg" width="29%">Staff</th>
</tr>

<td class="row3" colspan="1" rowspan="1" align="center" valign="top"><span class="postbody"><a target="_blank" title="Xooimage - Hebergement gratuit d'images" href="http://img49.xooimage.com/files/6/e/d/bouton-1-2064e51.jpg"><img src="http://img49.xooimage.com/files/6/e/d/bouton-1-2064e51.jpg" border="0" /></a></span></td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">Merci de vous présentez avant de poster sur le forum et de signer le réglement</td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <table><tr><td align="left"> <div class="infobulle">
  <img src="http://img49.xooimage.com/files/9/a/5/jmo-2083a0f.jpg"/>
      <span>
      <center> Administratrice </center><img src="http://img45.xooimage.com/files/1/7/3/1-85-2080366.jpg" /> <center> [B]rooklyn </center>
        </span>
<div class="infobulle">
  <img src="http://img45.xooimage.com/files/1/4/e/lisa-2083a2c.jpg"/>
      <span>
      <center> Administratrice </center><img src="http://img49.xooimage.com/files/1/5/1/lisae11_verbal_judo-2083a35.jpg" /><center> Marine </center>
        </span>
</div></td></tr></table> </span></td>


<tr><th class="thTop forabg" colspan="1" rowspan="1">Informations</th>
<th class="thTop forabg" colspan="1" rowspan="1">Welcome
<br></th><th class="thTop forabg" colspan="1" rowspan="1">Nouveautés du forum
<br></th></tr>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <br><b>Ouverture : </b>Le 01/09 2010</br>
<b>Design :</b>Version 2 par Marine et Brooklyn<br></br><b>Pour nous rejoindre,</b> inscrivez vous en cliquant <a href="http://leforumsurla.forumsactifs.com/profile.forum?mode=register" class="postlink">ICI</a> <br> <b>Pour devenir partenaire,</b> avec le forum venez faire une demande <a href="http://leforumsurla.forumsactifs.com/devenir-partenaire-f6/" class="postlink">ICI</a> <br></br></span></td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><a target="_blank" title="Xooimage - Hebergement gratuit d'images" href="http://img24.xooimage.com/files/6/d/0/welcome-20806b9.jpg"><img src="http://img24.xooimage.com/files/6/d/0/welcome-20806b9.jpg" border="0" /></a><br></br> <b> Bienvenue sur le forum L.A ,</b><br> forum sur la ville de Los Angeles, ses attractions, ses stars, ses quartiers etc... </br>


<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <a target="_blank" title="Xooimage - Hebergement gratuit d'images" href="http://img5.xooimage.com/files/0/0/7/new-20bleue-20clignotante-a877cf.gif"><img src="http://img5.xooimage.com/files/0/0/7/new-20bleue-20clignotante-a877cf.gif" border="0" /></a> Les stars féminines <a href="http://leforumsurla.forumsactifs.com/les-stars-feminine-f12/" class="postlink"> <b>ICI</b> </a><br> <a target="_blank" title="Xooimage - Hebergement gratuit d'images" href="http://img5.xooimage.com/files/0/0/7/new-20bleue-20clignotante-a877cf.gif"><img src="http://img5.xooimage.com/files/0/0/7/new-20bleue-20clignotante-a877cf.gif" border="0" /></a> La ville de L.A <a href="http://leforumsurla.forumsactifs.com/la-ville-de-la-f3/" class="postlink"><b>ICI</b></a>
</br></span></td>

</table>

Et ça me donne ça: https://i.servimg.com/u/f25/15/15/84/77/forum15.jpg

Est ce que vous pourriez me dire ce qui ne va pas dans mon code?

Merci d'avance =)

[mama3802]

Up =)

[Invité]

Bonjour,

Votre première infobulle n'est pas "fermée" il manque le </div> . Une fois cela corrigé le code fonctionne

Code:

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <table><tr><td align="left"> <div class="infobulle">
  <img src="http://img49.xooimage.com/files/9/a/5/jmo-2083a0f.jpg"/>
      <span>
      <center> Administratrice </center><img src="http://img45.xooimage.com/files/1/7/3/1-85-2080366.jpg" /> <center> [B]rooklyn </center>
        </span></div><div class="infobulle">
  <img src="http://img45.xooimage.com/files/1/4/e/lisa-2083a2c.jpg"/>
      <span>
      <center> Administratrice </center><img src="http://img49.xooimage.com/files/1/5/1/lisae11_verbal_judo-2083a35.jpg" /><center> Marine </center>
        </span>
</div></td></tr></table> </span></td>

Cordialement.

[Pénélope Ranger]

Bonjour désolé je me tape l'incruste je sais mais je recherche ce code depuis des mois mais où puis-je le mettre ????????

Merci

[Invité]

Bonjour,
Le code ci-dessus ne suffit pas à réaliser une infobulle, il faut lui associer un peu de CSS.
Code Html (pour le message de page d'accueil, par exemple)

Code:

<div class="infobulle">image 1 <span>contenu de l'infobulle</span></div>

Code CSS (personnalisable):

Code:

.infobulle{position: relative;z-index: 0;}

.infobulle:hover{background-color: transparent;z-index: 50;}

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{border: 1px;padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 150px ;
color:#FFFFFF;
border: 1px outset #FFFFFF;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

[Pénélope Ranger]

C'est tout ce qu'il faut ???? (Et le premier je le met sur "généralités" page d'accueil ?"

[mama3802]

ah oui mince, j'ai oublié de mettre un code dans le CSS

Merci pour la réponse =)