Problème avec mes infobulles.
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Problème avec mes infobulles.
Bonsoir,
j'ai actuellement un petit problème avec mes infobulles sur la PA de mon forum. Quand je place mes images sans infobulles, elles sont toutes alignées sans soucis. Après, quand je met l'infobulle, les images se mettent les unes en dessous des autres, et il m'est impossible de les remettre normalement. Je voulais savoir ce qui n'allait pas dans mes codes, et si vous aviez une solution.
Voyez le problème par vous même:
Voici le CSS de mes infobulles:
et le code html de ma PA:
Merci Beaucoup d'avance !
j'ai actuellement un petit problème avec mes infobulles sur la PA de mon forum. Quand je place mes images sans infobulles, elles sont toutes alignées sans soucis. Après, quand je met l'infobulle, les images se mettent les unes en dessous des autres, et il m'est impossible de les remettre normalement. Je voulais savoir ce qui n'allait pas dans mes codes, et si vous aviez une solution.
Voyez le problème par vous même:
- Spoiler:
Voici le CSS de mes infobulles:
- Code:
/********* Infobulle *********/
a.infobulle {
position: relative;
text-decoration:none;
color:#CC5252;
}
a.infobulle span {
display: none; /*Masque l'infobulle*/
}
a.infobulle:hover {
background: none; /*Pour le "bug" d'internet explorer*/
z-index: 999;
}
a.infobulle:hover span {
display: inline; /*Pour afficher l'infobulle au passage de la souris*/
position: absolute;
width:auto;
text-align:center;
white-space: nowrap; /*Pour éviter les retours à la ligne non désirés*/
bottom: 25px; /*Position de l'infobulle*/
right: 8px;
/*background-color:#FF99CC;/*Couleur de fond*/
background-image:url("http://school-of-pub.fr/images/fond_infobulle.png");
color: black; /*Couleur du texte*/
padding: 3px;
/*Bordures de l'infobulle*/
border: 1px double #000000;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
}
.bodyline
{
-moz-border-radius: 20px 20px 20px 20px ;
-webkit-border-radius: 20px 20px 20px 20px ;
border-radius:20px 20px 20px 20px;
}
.forumline {-moz-border-radius:8px;
-webkit-border-radius:8px;
-border-radius:3px;
-khtml-border-radius:3px;
border:3px solid #82675f;}
a {text-decoration: none;}
a:link {text-decoration: none;}
a:hover {text-decoration: none!important;}
a.forumlink {text-decoration: none;}
a.forumlink:hover {text-decoration: none!important;}
a.topiclink {text-decoration: none; }
a.topiclink:hover {text-decoration: none!important; }
.name a
{text-shadow: #000000 1px 1px 1px;}
td.row3 a.gensmall
{text-shadow: #000000 1px 1px 1px;}
.qeel_ombre a
{text-shadow: #000000 1px 1px 1px;}
.infobulle{position: relative;z-index: 2;}
.infobulle:hover{background-color: transparent;z-index: 50;}
.infobulle span{
position: absolute;
background-color: #f2e5d0;
padding: 1px;
left: -1000px;
visibility: hidden;
color: #D79872;}
.infobulle:hover span{
visibility: visible;
top: 2px;
left: 20px;
width: 150px ;
color:#6e4f2f;
border: 2px solid #6e4f2f;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}
}
et le code html de ma PA:
- Code:
<div style="text-align: center;" class="infobulle"><img src="http://img4.hostingpics.net/pics/215928Braise.png">
<span><font color="#D79872"> ♥ Braise <br>
~ Co-Fonda & Chef des Lion ~<br></font>
<br><img src="http://img4.hostingpics.net/pics/994466animaux10.gif"><br><br> Fondatrice Tarée de Service! <br><a href="%20http://silverwood-rpg.bb-fr.com/u2" target="_blank">Profil</a> . <a href="%20http://silverwood-rpg.bb-fr.com/privmsg?modepost&u=2" target="_blank">Mp</a></span></div><div style="text-align: center;"> </div>
<div style="text-align: center;" class="infobulle"><img src="http://img4.hostingpics.net/pics/517582Moira.jpg">
<span><font color="#D79872"> » Moïra <br>
~ Co-Fonda & Chef des Foxs ~<br></font>
<br><img src="http://img4.hostingpics.net/pics/156464emoticonsrenard.gif"><br><br> Fondatrice Folle Furieuse! <br><a href="%20http://silverwood-rpg.bb-fr.com/u1" target="_blank">Profil</a> . <a href="%20http://silverwood-rpg.bb-fr.com/privmsg?modepost&u1" target="_blank">Mp</a></span></div>
<div style="text-align: center;" class="infobulle"><img src="http://img10.hostingpics.net/pics/525206Sheffra.png">
<span><font color="#D79872"> Sheffra <br>
~ Modo & Lieutenante des Loups ~<br></font>
<br><img src="http://img4.hostingpics.net/pics/859726animaux40.gif"><br><br> Modo Machiavelique <br><a href="%20http://silverwood-rpg.bb-fr.com/u4" target="_blank">Profil</a> . <a href="http://silverwood-rpg.bb-fr.com/privmsg?modepost&%20u4" target="_blank">Mp</a></span></div>
<div style="text-align: center;"> </div><div style="text-align: center;" class="infobulle"><img src="http://img11.hostingpics.net/pics/594144Shayra.png">
<span><font color="#D79872"> Shayra <br>
~ Modo & Mage des Aigles ~<br></font>
<br><img src="http://img4.hostingpics.net/pics/747616sd1ke3e1gupoulet4i.gif"><br><br> Modo Serieuse <br><a href="http://silverwood-rpg.bb-fr.com/u6" target="_blank">Profil</a> . <a href="http://silverwood-rpg.bb-fr.com/privmsg?modepost&u6" target="_blank">Mp</a></span></div><div style="text-align: center;"> </div>
<div style="text-align: center;" class="infobulle"><img src="http://img11.hostingpics.net/pics/261978morwyn2.jpg">
<span><font color="#D79872"> Morwyn <br>
~ Modo & Chef des Rats ~<br></font>
<br><img src="http://img4.hostingpics.net/pics/520171animaux38.gif"><br><br> Modo Pacifique <br><a href="http://silverwood-rpg.bb-fr.com/u5" target="_blank">Profil</a> . <a href="http://silverwood-rpg.bb-fr.com/privmsg?modepost&u5" target="_blank">Mp</a></span></div><div style="text-align: center;"> </div>
Merci Beaucoup d'avance !
Dernière édition par Leyaa le Dim 5 Juin 2011 - 9:36, édité 1 fois
Re: Problème avec mes infobulles.
Bonsoir,
ceci est normal, car les div font automatiquement un saut de ligne, essayer de mettre vos infobulles dans un tableau pour les aligner.
Au passage, j'ai corrigé votre css qui avait un petit soucis de {}
Cordialement.
ceci est normal, car les div font automatiquement un saut de ligne, essayer de mettre vos infobulles dans un tableau pour les aligner.
Au passage, j'ai corrigé votre css qui avait un petit soucis de {}
- Code:
/* Infobulle */
a.infobulle {
position: relative;
text-decoration:none;
color:#CC5252;
}
a.infobulle span {
display: none; /*Masque l'infobulle*/
}
a.infobulle:hover {
background: none; /*Pour le "bug" d'internet explorer*/
z-index: 999;
}
a.infobulle:hover span {
display: inline; /*Pour afficher l'infobulle au passage de la souris*/
position: absolute;
width:auto;
text-align:center;
white-space: nowrap; /*Pour éviter les retours à la ligne non désirés*/
bottom: 25px; /*Position de l'infobulle*/
right: 8px;
background-color:#FF99CC;/*Couleur de fond*/
background-image:url("http://school-of-pub.fr/images/fond_infobulle.png");
color: black; /*Couleur du texte*/
padding: 3px;
/*Bordures de l'infobulle*/
border: 1px double #000000;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
}
.bodyline
{
-moz-border-radius: 20px 20px 20px 20px ;
-webkit-border-radius: 20px 20px 20px 20px ;
border-radius:20px 20px 20px 20px;
}
.forumline {-moz-border-radius:8px;
-webkit-border-radius:8px;
-border-radius:3px;
-khtml-border-radius:3px;
border:3px solid #82675f;}
a {text-decoration: none;}
a:link {text-decoration: none;}
a:hover {text-decoration: none!important;}
a.forumlink {text-decoration: none;}
a.forumlink:hover {text-decoration: none!important;}
a.topiclink {text-decoration: none; }
a.topiclink:hover {text-decoration: none!important; }
.name a
{text-shadow: #000000 1px 1px 1px;}
td.row3 a.gensmall
{text-shadow: #000000 1px 1px 1px;}
.qeel_ombre a
{text-shadow: #000000 1px 1px 1px;}
.infobulle{position: relative;z-index: 2;}
.infobulle:hover{background-color: transparent;z-index: 50;}
.infobulle span{
position: absolute;
background-color: #f2e5d0;
padding: 1px;
left: -1000px;
visibility: hidden;
color: #D79872;}
.infobulle:hover span{
visibility: visible;
top: 2px;
left: 20px;
width: 150px ;
color:#6e4f2f;
border: 2px solid #6e4f2f;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec mes infobulles.
Bonsoir, merci beaucoup pour la réponse. Qu'entendez-vous par un tableau ? car j'ai déja fait toute la PA avec un tableau, les infobulles sont dans la colonne du "Staff".
Si besoin, je donne le HTML de ma PA en entier:
Si besoin, je donne le HTML de ma PA en entier:
- Code:
<div class="en_tete" >=""><div style=""><span style="letter-spacing: -2px; text-shadow: 1px 1px 2px rgb(40, 40, 40);"><em><font size="24"><font face="Georgia"><font color="black">» Entrez dans le SilverWood«</font></font></font></em></span></div>
<table>
<tbody><tr>
<td id="tab1_col1">
<h1 id="titre_en_tete">Clans</h1>Renard: <font style="font-family: Arial Narrow;" size="1">(3 pers)</font><br>Lion: <font size="1"><span style="font-family: Arial Narrow;">(3 pers)</span><br></font>Ours: <font size="1"><span style="font-family: Arial Narrow;">(2 pers)</span></font><br>Aigle: <font size="1">(2<span style="font-family: Arial Narrow;"> pers)</span></font><br>Loutre: <font size="1"><span style="font-family: Arial Narrow;">(1 pers)</span></font><br>Cerf: <font size="1"><span style="font-family: Arial Narrow;">(3 pers)</span></font><br>Loup: <font size="1"><span style="font-family: Arial Narrow;">(4 pers)</span><br>Rat: <span style="font-family: Arial Narrow;">(3 pers)</span></font><br>Sans-Totem: <font size="1"><span style="font-family: Arial Narrow;">(1 pers)<br></span></font>
<h1 style="text-align: center;" id="titre_en_tete">Le Staff<br><br></h1><div style="text-align: center;" class="infobulle"><img src="http://img4.hostingpics.net/pics/215928Braise.png">
<span><font color="#D79872"> ♥ Braise <br>
~Co-Fonda & Chef des Lions~<br></font>
<br><img src="http://img4.hostingpics.net/pics/994466animaux10.gif"><br><br> Fondatrice Tarée de Service! <br><a href="%20http://silverwood-rpg.bb-fr.com/u2" target="_blank">Profil</a> . <a href="%20http://silverwood-rpg.bb-fr.com/privmsg?modepost&u=2" target="_blank">Mp</a></span></div><div style="text-align: center;"> </div><div style="text-align: center;" class="infobulle"><img src="http://img4.hostingpics.net/pics/517582Moira.jpg">
<span><font color="#D79872"> » Moïra <br>
~Co-Fonda & Chef des Foxs~<br></font>
<br><img src="http://img4.hostingpics.net/pics/156464emoticonsrenard.gif"><br><br> Fondatrice Folle Furieuse! <br><a href="%20http://silverwood-rpg.bb-fr.com/u1" target="_blank">Profil</a> . <a href="%20http://silverwood-rpg.bb-fr.com/privmsg?modepost&u1" target="_blank">Mp</a></span></div><div style="text-align: center;" class="infobulle"><img src="http://img10.hostingpics.net/pics/525206Sheffra.png">
<span><font color="#D79872"> Sheffra <br>
~Modo & Lieutenante des Loups~<br></font>
<br><img src="http://img4.hostingpics.net/pics/859726animaux40.gif"><br><br> Modo Machiavelique <br><a href="%20http://silverwood-rpg.bb-fr.com/u4" target="_blank">Profil</a> . <a href="http://silverwood-rpg.bb-fr.com/privmsg?modepost&%20u4" target="_blank">Mp</a></span></div><div style="text-align: center;"> </div><div style="text-align: center;" class="infobulle"><img src="http://img11.hostingpics.net/pics/594144Shayra.png">
<span><font color="#D79872"> Shayra <br>
~Modo & Mage des Aigles~<br></font>
<br><img src="http://img4.hostingpics.net/pics/747616sd1ke3e1gupoulet4i.gif"><br><br> Modo Pacifique <br><a href="http://silverwood-rpg.bb-fr.com/u6" target="_blank">Profil</a> . <a href="http://silverwood-rpg.bb-fr.com/privmsg?modepost&u6" target="_blank">Mp</a></span></div><div style="text-align: center;"> </div><div style="text-align: center;" class="infobulle"><img src="http://img11.hostingpics.net/pics/261978morwyn2.jpg">
<span><font color="#D79872"> Morwyn <br>
~Modo & Chef des Rats~<br></font>
<br><img src="http://img4.hostingpics.net/pics/520171animaux38.gif"><br><br> Modo Sadique<br><a href="http://silverwood-rpg.bb-fr.com/u5" target="_blank">Profil</a> . <a href="http://silverwood-rpg.bb-fr.com/privmsg?modepost&u5" target="_blank">Mp</a></span></div><div style="text-align: center;"> </div>
</td><td id="tab1_col2">
<h1 id="titre_en_tete"><font style="font-family: Arial Narrow;" size="5"><span style="font-weight: bold;">Bienvenue au SILVER WOOD !</span></font></h1><font size="2"></font><div style="text-align: justify;"><font size="2"><span style="color: Black; font-family: Book Antiqua;">L'aventure commence il y a 6000 ans de là, dans une immense forêt partagée entre huit clans humains: </span></font><font style="color: Black; font-family: Book Antiqua;" color="red" size="2">Le clan du Lion</font><font size="2"><span style="color: Black; font-family: Book Antiqua;">, </span></font><font style="color: Black; font-family: Book Antiqua;" color="orange" size="2">le clan du Renard</font><font size="2"><span style="color: Black; font-family: Book Antiqua;">, </span></font><font style="color: Black; font-family: Book Antiqua;" color="green" size="2">le clan de l'Aigle</font><font size="2"><span style="color: Black; font-family: Book Antiqua;">, </span></font><font style="color: Black; font-family: Book Antiqua;" color="olive" size="2">le clan du Cerf</font><font size="2"><span style="color: Black; font-family: Book Antiqua;">, </span></font><font style="color: Black; font-family: Book Antiqua;" color="brown" size="2">le clan de l'Ours</font><font size="2"><span style="color: Black; font-family: Book Antiqua;">, </span></font><font style="color: Black; font-family: Book Antiqua;" color="cyan" size="2">le clan de la loutre</font><font size="2"><span style="color: Black; font-family: Book Antiqua;">, </span></font><font style="color: Black; font-family: Book Antiqua;" color="black" size="2"> le clan du loup</font><font size="2"><span style="color: Black; font-family: Book Antiqua;">, et</span></font><font style="color: Black; font-family: Book Antiqua;" color="indigo" size="2"> le clan du rat</font><font size="2"><span style="color: Black; font-family: Book Antiqua;">. Mais tout ces humains ont une particularité. En effet, le SilverWood est emplie de magie. Les humains, ont donc, dès leur totem en main, le don de se transformer en leur animal de clan. Le Silver wood est grand, mais les guerres de territoires se font de plus en plus fréquentes! Arriveras-tu à relever le défi ? rejoins-nous et viens prouver ton courage et ta foi!</span></font><br></div><br><br> <div style="text-align: center;"><object type="application/x-shockwave-flash" data="http://data0.eklablog.com/crazygirlstories/perso/dewplayer-bubble.swf " id="dewplayer" name="Silver Wood" width="250" height="65"> <param name="wmode" value="transparent"><param name="movie" value=" http://data0.eklablog.com/crazygirlstories/perso/dewplayer-bubble.swf "> <param name="flashvars" value="mp3=http://data0.eklablog.com/crazygirlstories/perso/musiques/shayra.mp3&showtime=1"> </object></div>
</td>
<td id="tab1_col3">
<h1 id="titre_en_tete">Saison</h1><div style="text-align: justify;"><span style="font-family: Cambria;">L'hiver à rendu l'âme. Les fleurs recommencent à pousser, la neige fond, tout redevient beau. Le manque de nourriture va se dissimuler, pour faire place à une multitude de gibier.C'est la saison des amours, Bref, tout va pour le mieux (ou presque...)</span><br></div><h1 id="titre_en_tete">Liens Utiles</h1>✗ <a href="http://silverwood-rpg.bb-fr.com/t1-le-reglement"><span style="font-family: Book Antiqua;">Règlement</span></a><br>
✗ <a href="http://silverwood-rpg.bb-fr.com/t2-le-contexte"><span style="font-family: Book Antiqua;">Contexte</span></a><br>✗ <a href="http://silverwood-rpg.bb-fr.com/f24-partie-invites"><span style="font-family: Book Antiqua;">Partenaire ?</span></a><br><h1 id="titre_en_tete">Annuaires</h1><div style="text-align: center;"><a href="http://www.sawen.net" target="_blank"><img src="http://www.sawen.net/sawentop.jpg" alt="Annuaire forum RPG" title="Annuaire forum RPG" width="88" border="0" height="31"></a></div>
</td>
</tr>
</tbody></table>
<font style="font-weight: bold; color: Red;" size="3"><span style="font-family: Century Gothic;"><span style="color: Black;"></span></span></font><br><font size="3"><span style="font-weight: bold; color: Red; font-family: Century Gothic;"><span style="text-decoration: underline;">RAPPEL:</span> TOUT LES MEMBRES RECENSES PEUVENT PARTICIPER A L'ASSEMBLEE, ELLE EST TOUJOURS OUVERTE!</span></font><br><table><tbody></tbody></table>
</div>
Re: Problème avec mes infobulles.
Je parle d'un tableau dans votre tableau alors. ^^
C'est la seule solution.dans la cellule du staff rajoutez :
et terminer par
entre la
Cordialement.
C'est la seule solution.dans la cellule du staff rajoutez :
- Code:
<table with="100%"><tr><td>infobulle 1 </td><td>2 infobulle 2 </td><td> infobulle 3 </td>
et terminer par
- Code:
</tr></table>
entre la
- Code:
<td>cellule staff </td>
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec mes infobulles.
Merci beaucoup, c'est parfait!
Sujet résolu
Cordialement, bonne journée!
Sujet résolu
Cordialement, bonne journée!
Sujets similaires
» Problème avec les infobulles
» Problème avec les infobulles
» problème avec les infobulles
» Problème avec les infobulles & tableaux
» Problème d'infobulles avec Firefox 4
» Problème avec les infobulles
» problème avec les infobulles
» Problème avec les infobulles & tableaux
» Problème d'infobulles avec Firefox 4
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum