Deux infobulles côte à côte

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

En cours Deux infobulles côte à côte

Message par Hope_Hell le Mer 11 Sep 2013 - 21:30

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>

Hope_Hell
**

Messages : 72
Inscrit(e) le : 21/06/2013

http://marvelnextgeneration.forumpro.fr/
Hope_Hell a été remercié(e) par l'auteur de ce sujet.

En cours Re: Deux infobulles côte à côte

Message par Matriochka le Jeu 12 Sep 2013 - 11:25

Bonjour,

Dans ton CSS, tu as :
Code:
float:center;
Remplace simplement par :
Code:
float:left;

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

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


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