Infobulle petit probleme

[Invité]

Bonjour,

Voila, j'ai réussi a mettre des infobulle pour mon Staff. Tout fonctionne bien. Le problème c'est que j'aimerais mettre les images à côté et non juste en dessous. Je vous montre ce que ça fais:

Spoiler:

Voila, si vous avez besoin de quoi que se sois dites le moi.

Merci.

[Rin_.]

Pour résoudre votre problème, j'ai besoin du code de vos infobulles.
Cela doit être un problème d'HTML.

[Invité]

ok: Voila ce que j'ai mis je vous en mes que un seul :

Code:

<table><tr><td><div class="lock"><img src="http://fotos.fotoflexer.com/a6e2e0d5dd67b9d2bfb75185c507e28d.jpg" border="0" alt="" /><div class="lock-hidden"><a href="http://the-world-of-cats.forumgratuit.org/u3?tid=c56c772e518cbfbdb44c22e2386fa6f7" class="postlink">Profil</a><br></br>Etoile Rêveuse <br></br>Chef&Admin</div></div></td></tr></table>

[Anzu]

Bonsoir,

C'est parce qu'il faut faire un tableau avec un tr et trois td
Vous mettez une image par td.

Cordialement.

[Invité]

Oui ça va mieux, mais maintenant, l'infobulle va dernier les images.
Comment faire ?


Merci pour la premier aide.

[Anzu]

Pourriez vous me donner le code actuel ? ^^
+ css.

Cordialement.

[Invité]

Alors le code actuel des infobulle :

Code:


<table><tr><td><div class="lock"><img src="http://fotos.fotoflexer.com/614f2547d977b2a047a05df26de8465b.jpg" border="0" alt="" /><div class="lock-hidden"><a href="http://the-world-of-cats.forumgratuit.org/u1?tid=c56c772e518cbfbdb44c22e2386fa6f7" class="postlink">Profil</a> <br></br>Éclipse de Lune<br></br>Chef&Fonda&Admin</div></div> </td>

<td><div class="lock"><img src="http://fotos.fotoflexer.com/7682d147a6e9f3b9f58a301cc56c7df0.jpg" border="0" alt="" /><div class="lock-hidden"><a href="http://the-world-of-cats.forumgratuit.org/u4?tid=c56c772e518cbfbdb44c22e2386fa6f7" class="postlink">Profil</a><br></br>Étoile du Phoénix<br></br>Chef&Admin<br></br></div></div></td>

<td><div class="lock"><img src="http://fotos.fotoflexer.com/a6e2e0d5dd67b9d2bfb75185c507e28d.jpg" border="0" alt="" /><div class="lock-hidden"><a href="http://the-world-of-cats.forumgratuit.org/u3?tid=c56c772e518cbfbdb44c22e2386fa6f7" class="postlink">Profil</a><br></br>Etoile Rêveuse <br></br>Chef&Admin</div></div></td></tr></table>

et le Css:

Code:


    /*----- INFOBULLES ------*/



    .lock  {
      position: relative;
    }
    .lock .lock-hidden {
      /* center */
      display: none;
      position: absolute;
      padding-left : 5px;
      padding-right : 5px;
      padding-top  : 2px;
      padding-bottom : 1px;
        top: 22px;
        left: 93px;
      /* style du bloc qui apparait */
      border: 3px groove #00CC33;
      border-radius: 5px;
      background-color: #ffffff;
      -moz-border-radius: 5px;
      text-align: center;
        visibility: visible;
    width: 150px;
    height: 170px;
    }
    .lock:hover .lock-hidden {
      display: block;
    }


Voila.

[Invité]

Aidez moi S'il vous plait !

[Rin_.]

Bonsoir,

Avant tout, veuillez m'excuser pour le retard de ma réponse, sachez qu'après avoir mis ce code, il me faut le code des images voulant être insérée.
Sauf si vous voulez les mettre par vous-même.

Insérez ce code dans votre CSS :
(PA > Affichage > Couleurs > Feuille de style CSS)

Code:

/*----- INFOBULLES ------*/

a.imginfo span {
  display: none;
}

a.imginfo:hover {
  background: none;
  z-index: 999;
  cursor: help;
}

a.imginfo:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 1020px;
  left: 450px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 3px solid #b6b6b6;
}


Là où vous voulez l'infobulle (par exemple sur votre page d'accueil), insérez :

Code:

<a class="imginfo"><img src="URL IMAGE" alt="" />
<span>Le texte qui apparaît dans l'infobulle</span>
</a>

Sa devrait fonctionner.

Cordialement.

[Anzu]

Bonjour, Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné. Je vous invite à lire : - Règles générales du forum - Charte de ce forum A bientôt sur ForumActif

On a tous une vie, nous ne sommes pas des machines, il faut savoir être patient.

La prochaine fois, votre sujet sera verrouillé

Cordialement.

[Invité]

oui désolé je ferais attention la prochaine fois. Merci Rin je vais essayer.

Edit: Super sa fonctionne merci beaucoup !

[Rin_.]

Pense à supprimer ton ancien code pour un bon fonctionnement

Cordialement.

[Invité]

ok sa fonctionne merci beaucoup!