Positionnement d'une infobulle
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Positionnement d'une infobulle
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 :
Voici le HTML relatif à cet onglet :
Ainsi que le CSS :
Merci d'avance pour vos réponses ! :)
Bonne soirée,
Thalierya
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
Dernière édition par Thalierya le Mar 20 Nov 2012 - 23:42, édité 1 fois
Re: Positionnement d'une infobulle
Bonsoir.
En changeant le CSS comme ceci :
c'est à dire en rajoutant
est-ce que ça vous va ?
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 ?
Re: Positionnement d'une infobulle
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à ?
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à ?
Re: Positionnement d'une infobulle
(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.
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.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Positionnement d'une infobulle
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 !
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 !
Sujets similaires
» positionnement icone pour infobulle
» Infobulle : texte dans l'infobulle qui se souligne
» Positionnement CSS
» Problème de positionnement
» Positionnement d'images via div et css
» Infobulle : texte dans l'infobulle qui se souligne
» Positionnement CSS
» Problème de positionnement
» Positionnement d'images via div et css
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum