Positionnement d'une infobulle

[Thalierya]

Bonjour,

Après de moult recherches un peu partout, des essais non concluants et des prises de têtes, je me résous finalement à demander de l'aide pour mon problème. Le voilà : J'ai réussi à faire des infobulles comme vous pouvez le voir à cette adresse, dans l'onglet "Personnages prédéfinis" :

http://lilya.forumsgratuits.fr/

Ces infobulles apparaissent sous mon texte sur lequel on passe la souris. Seulement moi ce que je voudrais, c'est que ces infobulles apparaissent toutes à droite du texte, et qui plus est, dans un cadre, comme indiqué sur l'image :

Spoiler:

Voici le HTML relatif à cet onglet :

Code:

<div class="perso"><span>Personnages prédéfinis</span><font align="left">
<br><br><table><tr><div class="lock">• <font color="#b8bcbd">Eddranel On'faeanui</font><div class="lock-hidden">Roi ange à l'égo sursurdimensionné. C'est pour ça qu'on l'a choisit pour roi, car il représentait à merveille son peuple !</div></div></tr>
<tr><div class="lock">• <font color="#b8bcbd">Abigaëlle On'faeanui</font><div class="lock-hidden">Reine des anges, si on enlève "gaëlle", elle a le même prénom que mon toutou ! :D Et mon toutou, il a trop la classe o/</div></div></tr>
<tr><div class="lock">• <a href="http://planete-lilya.forumgratuit.org/t142-smaurog-dromos-souverain-des-dragons"><font color="#ff6600">Smaurog Dromos</font></a><div class="lock-hidden">Smaurog, souverain des dragons depuis des milliers d'années. Si ça c'est pas la classe mon coco ♪</div></div></tr>
<tr><div class="lock">• <font color="#ff6600">Riwana Dromos</font><div class="lock-hidden">La douce et tranquille Riwana, reine des dragons est le parfait opposé de son époux. Un peu comme le yin et yang.</div></div></tr>
<tr><div class="lock">• <font color="#363434">Sirwën Zelynt'hel</font><div class="lock-hidden">La méchante reine des drows. Bah oui, elle ne va pas être gentille hein ! :0 Ce serait contraire au règlement ! Quel règlement ? Boarf, on s'en fout ♪</div></div></tr>
<tr><div class="lock">• <font color="#1f5e13">R'wondor An'atharas</font><div class="lock-hidden">Ah... Le terrible Empereur des elfes R'wondor qui en fait voir des vertes et des pas mures aux hybrides. S'il continue comme ça, il sera mort dans peu de temps.</div></div></tr>
<tr><div class="lock">• <font color="#1f5e13">Moïra An'atharas</font><div class="lock-hidden">Impératrice des elfes. Ca en jette comme titre, hein ? De quoi prendre la grosse tête, mais Moïra ne la prend pas du tout.</div></div></tr>
<tr><div class="lock">• <font color="#84d3eb">Première esprit</font><div class="lock-hidden">Première femme à avoir été transformée en esprit. L'utilité d'un tel personnage ? Nous ne la savons pas encore x)</div></div></tr>
<tr><div class="lock">• <font color="#6ecf00">Lanae qqch</font><div class="lock-hidden">Gentille petite reine des fées, toute mignonne, attention tout de même à ne pas lui marcher sur les pieds, ou sinon elle pourrait tenter en vain de vous tuer</div></div></tr>
<tr><div class="lock">• <font color="#000080">Siegfried Van Greif</font><div class="lock-hidden">Roi des humains, Siegfried est un vieux roi tout barbu, mais ce n'est pas pour autant qu'il est sénile et qu'Alzheimer s'est emparé de son cerveau, loin de là !</div></div></tr>
<tr><div class="lock">• <font color="#000080">Mme Van Greif</font><div class="lock-hidden">Reine des humains. Mme Van Greif n'a pas encore de prénom... C'est bête pour elle hein ? Mais la faute à qui ? A nous bien sur ! :D</div></div></tr>
<tr><div class="lock">• <font color="#660099">Chef des hybrides</font><div class="lock-hidden">Chef des hybrides. Elfe-ours, très bon guerrier, stratège et manipulant aisément la glace. Son but ? Tuer R'wondor bien sur !</div></div></tr>
<tr><div class="lock">• <font color="#d18347">Roi nain</font><div class="lock-hidden">Roi des nains. Gronchon, sa barbe représente tout pour lui. La couper ? JAMAIS d e la vie voyons ! :0 Ce serait un sacrilège. Il pourrait vous couper la tête pour cela !</div></div></tr>
<tr><div class="lock">• <font color="#990c0c">Vlad truc</font><div class="lock-hidden">Roi des vampires. Il a trop la classe, car il a la peau blanche, de grandes canines et fait peur aux gentilles pitites fifilles à son papa !</div></div></tr>
<tr><div class="lock">• <font color="#990c0c">Reine vampire</font><div class="lock-hidden">Reine des vampires, et gentille (ou pas) petite (ou pas) épouse de notre cher (ou pas) Vlad ♪</div></div></tr></table></div>

Ainsi que le CSS :

Code:

.perso {
  text-shadow: 0 0 5px #fff;
    font-variant: small-caps;
text-align: left;
margin-left: 30px;}
 
.lock  {
  position: relative;
  cursor: pointer;
}
.lock .lock-hidden {
  /* center */
  display: none;
  align: right;
    padding: 1px;
    top: 45px;
  left: 150px;
 
 /* style du bloc qui apparait */
  border: 2px outset #BECCCC;
  border-radius: 5px;
  background-color: transparent;
  -moz-border-radius: 5px;
  text-align: center;
    visibility: visible;
  }

.lock:hover .lock-hidden {
  display: block;
  }

Merci d'avance pour vos réponses ! :­)

Bonne soirée,
Thalierya

[Lixyr]

Bonsoir.



En changeant le CSS comme ceci :

Code:

        .perso {
          text-shadow: 0 0 5px #fff;
            font-variant: small-caps;
        text-align: left;
        margin-left: 30px;}
       
        .lock  {
          position: relative;
          cursor: pointer;
        }
        .lock .lock-hidden {
          /* center */
          display: none;
          align: right;
            padding: 1px;
          left: 150px; top:-25px;
  position:absolute;
  z-index:999;       
        /* style du bloc qui apparait */
          border: 2px outset #BECCCC;
          border-radius: 5px;
          background-color: transparent;
          -moz-border-radius: 5px;
          text-align: center;
            visibility: visible;
    height:200px;
  width:250px;
          }
       
        .lock:hover .lock-hidden {
          display: block;
          }

c'est à dire en rajoutant

left: 150px; top:-25px;
position:absolute;
z-index:999;
[...]
height:200px;
width:250px;

est-ce que ça vous va ?

[Thalierya]

Bonsoir,

Déjà, merci de votre réponse aussi rapide, je ne m'y attendais pas ! :­)

Seulement en fait, je crois m'être mal expliquée ^^" Donc, je voudrais que le cadre soit fixe à droite, et que, si notre souris ne survole rien, il soit présent, et qu'au moment où elle survole quelque chose, le texte de l'infobulle apparaisse dans le cadre. J'ai bien expliqué mon problème là ?

[Lixyr]

(re)Bonsoir,

Concrètement, ça peut se faire, mais ce serait plutôt avec des onglets, car le terme info-bulle sous-entend qu'il n'y a plus d'info en bulle lorsqu'on bouge la souris. Je vous conseille donc de rechercher des tutos sur les onglets en page d'accueil, il y en a beaucoup sur ce forum.

Cordialement.

[Thalierya]

Oh, d'accord je vois. Je vais donc essayer en faisant via cette méthode-ci, avec des onglets.

Merci de votre réponse ^^

Thalierya

EDIT : après essais, j'ai réussi à parvenir à ce que je voulais ! Problème résolu, merci encore !