Problème avec mes infobulles.

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec mes infobulles.

Message par Leyaa Sam 4 Juin 2011 - 23:10

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. reflexion

Voyez le problème par vous même:
Spoiler:
J'aimerais positionner mes images les unes à coté des autres.


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 &amp; 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&amp;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 &amp; 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&amp;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 &amp; 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&amp;%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 &amp; 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&amp;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 &amp; 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&amp;u5" target="_blank">Mp</a></span></div><div style="text-align: center;"> </div>



Merci Beaucoup d'avance ! thumleft


Dernière édition par Leyaa le Dim 5 Juin 2011 - 9:36, édité 1 fois
Leyaa

Leyaa
**

Féminin
Messages : 70
Inscrit(e) le : 04/06/2011

http://arkham-test.forumactif.org
Leyaa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec mes infobulles.

Message par SoraNoHime Sam 4 Juin 2011 - 23:37

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 {}

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec mes infobulles.

Message par Leyaa Sam 4 Juin 2011 - 23:55

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:

Code:
<div class="en_tete" &gt;=""><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 &amp; 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&amp;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 &amp; 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&amp;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 &amp; 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&amp;%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 &amp; 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&amp;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 &amp; 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&amp;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&amp;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>
Leyaa

Leyaa
**

Féminin
Messages : 70
Inscrit(e) le : 04/06/2011

http://arkham-test.forumactif.org
Leyaa a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème avec mes infobulles.

Message par SoraNoHime Dim 5 Juin 2011 - 0:00

Je parle d'un tableau dans votre tableau alors. ^^

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>
etc...

et terminer par
Code:
</tr></table>

entre la
Code:
 <td>cellule staff </td>

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec mes infobulles.

Message par Leyaa Dim 5 Juin 2011 - 9:36

Merci beaucoup, c'est parfait!

Sujet résolu résolu

Cordialement, bonne journée!
Leyaa

Leyaa
**

Féminin
Messages : 70
Inscrit(e) le : 04/06/2011

http://arkham-test.forumactif.org
Leyaa a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum