Deux infobulles côte à côte

[Hope_Hell]

Bonjour/Bonsoir à tout le monde.

J'ai pas mal fouillé sur le forum concernant les codes pour mettre des infobulles côte à côte. J'ai essayé ces mêmes codes mais qui ne marchent pas à chaque fois chez moi.
A force de tout modifier, je suis entrain de créer un fouillis dans mes propres codes ^^.

Je vous remercie par avance de vos conseils et de votre aide.

Voici mon image concernant mes infobulles. Comme vous pouvez le voir, elles sont l'une en dessous de l'autre.


Voici mon code CSS concernant les infobulles:

Code:



div.infobulle {
     position: relative;
     float: center;
   }

 div.infobulle span {
 position:absolute;
 margin-top:23px;
 margin-left:-15px;
 background:rgba(5,5,5,5);
 padding:10px;
 border-radius:5px;
 box-shadow:0 0 4px rgba(0,0,0,.5);
 transform:scale(0) rotate(-20deg);
 transition:all .50s;
 opacity:0;
   }

div.infobulle:hover {
     background: none; /* correction d'un bug IE */
     z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
   }

 div.infobulle:hover span,div.infobulle:focus span  {
 transform:scale(1) rotate(0);
 opacity:1;
   }

.tourne {
    transition: 1.5s;
    -moz-transition: 1.5s;
    -webkit-transition: 1.5s;
}
.tourne:hover {
    transition: 1.5s;
    -moz-transition: 1.5s;
    -webkit-transition: 1.5s;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}



Voici les codes sur ma PA concernant la partie "staff" des infobulles :

Code:


<td><div style="letter-spacing: -1px; font-family : 'Bad Script'; text-align: center;font-size : 21px; color: #CC9999; text-shadow : 2px 2px 2px black; opacity: 5;margin-top:-5px;">Staff</div><center><div style="width:215px;height:200px; background-color:#000000; padding-left: 20px; padding-top: 10px; padding-bottom: 10px; padding-right: 20px; border: 2px solid #7C375C; margin-top: -15px;font-size: 10px;font-family:verdana; color:white;"><center><div class="infobulle"><img class="tourne" src=" http://i76.servimg.com/u/f76/09/03/25/81/lumiar10.png"width="55px" height="55px" style="border-radius:100px;box-shadow:0px 0px 2px #CC9999;" /><span><div class="nomstaff">NOM PRENOM</div><color:white>FONDATRICE</color><div></div><div><img src="http://img4.hostingpics.net/pics/302663tumblrmc4fpfljfa1rqrk6x.gif" style="width:160px;" /><br>
<a href="http://asaria-evolution.forumactif.org/u3contact">Me contacter</a> </div></span></div><div class="infobulle"><img class="tourne" src=" http://i76.servimg.com/u/f76/09/03/25/81/lumiar10.png"width="55px" height="55px" style="border-radius:100px;box-shadow:0px 0px 2px #CC9999;" /><span><div class="nomstaff">NOM PRENOM</div><color:white>FONDATRICE</color><div></div><div><img src="http://img4.hostingpics.net/pics/302663tumblrmc4fpfljfa1rqrk6x.gif" style="width:160px;" /><br>
<a href="http://asaria-evolution.forumactif.org/u3contact">Me contacter</a> </div></span></div><div

</center></center></div></center></td></tr></table>


[Matriochka]

Bonjour,

Dans ton CSS, tu as :

Code:

float:center;

Remplace simplement par :

Code:

float:left;