problème info bulle

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

Résolu problème info bulle

Message par titevivi le Sam 19 Nov 2011 - 20:13

Bonsoir,
voila j'ai des info bulle sur ma page d'accueil mais j'aimerais bien les centrer, mais pas toute juste celles dans la partie concours&co.
Voici mes code:

PA:
Code:
<table width="900px">
  <tbody><tr>
  <td width="155px"><div class="titre">Top Sites</div></td>
  <td width="155px"><div class="titre">Liens Utiles</div></td>
  <td colspan="2" width="500px"><div class="titre">Bienvenue sur Graphique de Stars</div></td>
  </tr>
 

  <tr>
  <td rowspan="3" width="150px"><div class="boite"><span><marquee behavior="scroll" direction="up" scrollamount="1" height="200">

<a href="http://www.root-top.com/topsite/graphix/in.php?ID=1795" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/graphix/banner.gif" alt="" border="0"></a> <a href="http://www.root-top.com/topsite/belette/in.php?ID=2320" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/belette/banner.gif" alt="" border="0"></a> <a href="http://www.root-top.com/topsite/punkee/in.php?ID=150" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/punkee/banner.gif" alt="" border="0"></a> <a href="http://www.root-top.com/topsite/graphxtop/in.php?ID=264" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/graphxtop/banner.gif" alt="" border="0"></a><br>
<a href="http://www.root-top.com/topsite/islemme/in.php?ID=328" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/islemme/banner.gif" alt="" border="0"> </a><a href="http://www.root-top.com/topsite/natou/in.php?ID=730" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/natou/banner.gif" alt="" border="0"></a> <a href="http://www.root-top.com/topsite/callmegod/in.php?ID=256" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/callmegod/banner.gif" alt="" border="0"></a> <a href="http://www.root-top.com/topsite/lumosmaxima/in.php?ID=1224" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/lumosmaxima/banner.gif" alt="" border="0"></a><br>
<a href="http://www.root-top.com/topsite/graphiqueworld/in.php?ID=238" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/graphiqueworld/banner.gif" alt="" border="0"></a><br>
<a href="http://www.root-top.com/topsite/kisswebdesign/in.php?ID=2802" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/kisswebdesign/banner.gif" alt="" border="0"></a><br>
<a href="http://www.root-top.com/topsite/lelylee/in.php?ID=405" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/lelylee/banner.gif" alt="" border="0"></a><br>
<br>
<a href="http://www.boosterforum.com" class="postlink" target="_blank" rel="nofollow"><img src="http://www.boosterforum.com/forum_ban/2_88x31.gif" style="width: 88px;height: 31px" border="0"></a><br><a href="http://graphique-de-stars.boosterforum.com/" class="postlink" graphiques="" de="" stars="" boost="" forums<="" a=""><br>
<br>
</a></marquee></span></div></td>
  <td width="100px"><div class="boite">
  <span class="chatling"><a href="http://graphique-de-stars.forum-actif.net/f1-reglement" class="postlink">*Règlement*</a></span>
  <span class="chatling"><a href="http://graphique-de-stars.forum-actif.net/f4-presentation" class="postlink">*Présentation*</a></span>
  <span class="chatling"><a href="http://graphique-de-stars.forum-actif.net/f7-partenariat" class="postlink">*Partenariat*</a></span>
  <span class="chatling"><a href="http://graphique-de-stars.forum-actif.net/f15-evaluation" class="postlink">*Evaluation*</a></span>
  <span class="chatling"><a href="http://graphique-de-stars.forum-actif.net/f10-tutoriaux" class="postlink">*Tutoriaux*</a></span>
<span class="chatling"><a href="http://graphique-de-stars.forum-actif.net/f106-libre-service" class="postlink">*Libre service*</a></span>
  </div></td>
    <td colspan="2" width="450px"><div class="boite"><div style="height:175px;overflow:auto;">
  Graphique de stars est un Forum de graphisme, qui accueil avec plaisir tout ceux et celles qui veulent partager leurs talents, nous montrer leurs créa's,...
mais aussi ceux et celles qui veulent apprendre, nous avons quelque prof qui pourrons vous donner des cours.
Mais il y a plusieurs activités aussi, comme des concours, battles, défis, duels, jeux,...
Vous pouvez aussi discuter de tout et de rien, de ce que vous aimez ou détestez.
Pour le peux que nous sommes aujourd'hui nous formons une équipe solide, on est presque une famille!
Graphique de stars est né le 5 mai 2010, soit {FORUMAGE} jours. Nous avons actuellement {FORUMCOUNTPOST} messages et {FORUMCOUNTUSER} membres enregistrés.<br><br>
Souhaitons bienvenue à <strong>{FORUMLASTUSER}</strong>
 <br></div></div></td>

  </tr><tr>
  <td width="150px"><div class="titre">Crédits</div></td>
  <td width="200px"><div class="titre">News</div></td>
  <td width="300px"><div class="titre">Admin's</div></td>
  </tr>

  <tr>
  <td width="150px"><div class="boite"><div style="height:100px;overflow:auto;">Page d'accueil par Akino de <br> <a href="http://worldhelp.superforum.fr" class="postlink">World help</a><br><br>Design par Groumpy</div></div></td>
<td width="200px"><div class="boite"><div style="height:100px;overflow:auto;"><span><marquee behavior="scroll" direction="up" scrollamount="1" height="60"><div style="text-align: center;">
*Concours: "sondage" Le retour de Métal vs Pop
<br><br>* N'oublez pas votre boule pour le design de décembre.
<br><br>* Créa de la semaine N°14 en cours...</div></marquee>
 <br> </span></div></div></td><td width="300px"><div class="boite1"><div class="infobulle"><img src="http://i40.servimg.com/u/f40/09/00/34/04/bre10.png" class="transparence"><span>Titevivi-Loveuse<div>♥ Fondatrice ♥<br><img src="http://i40.servimg.com/u/f40/09/00/34/04/break10.png"></div><div><a href="http://graphique-de-stars.forum-actif.net/u1">Profil</a></div><div><a href="http://graphique-de-stars.forum-actif.net/privmsg?mode=post&amp;u=1">MP</a></div></span></div>
<span class="staff"> <div>
  <div class="infobulle"> <img src="http://i40.servimg.com/u/f40/09/00/34/04/0010.png" class="transparence"><span>Tara<div>♣  Admin ♣<br><img src="http://r15.imgfast.net/users/1513/24/24/24/avatars/3-70.jpg"></div><div><a href="http://graphique-de-stars.forum-actif.net/u3">Profil</a></div><div><a href="http://graphique-de-stars.forum-actif.net/privmsg?mode=post&amp;u=3">MP</a></div></span></div>
<br><div>


  </div></div></span></div></td></tr>
 <tr> <td style="text-align: center;" colspan="5" width="450px"><div class="titre"><div style="margin: auto;width: 100%;">Résultat concours &amp; co:</div></div></td>
</tr></tbody></table><div class="titre"><div style="text-align: center;"><center><div class="infobulle"> <img src="http://i40.servimg.com/u/f40/09/00/34/04/craa_s10.png" class="transparence"><span>Gagnant de la créa's de la semaine spécial Halloween est<div>noa:<br><img src="http://i45.servimg.com/u/f45/11/45/84/95/alien_10.jpg"></div><div>Bravo a toi</div></span></div>
<br><div><br>
 <div class="infobulle"> <img src="http://i40.servimg.com/u/f40/09/00/34/04/concou13.png" class="transparence"><span>Gagnant du concours est<div>...<br><img src=""></div><div>Bravo a toi</div></span></div></div></center></div>
<br><div><br>

</div></div>

Css:
Code:
          textarea, .textarea.post, input.post {
        border-radius:10px;
        border-radius:10px;
        -webkit-border-radius: 10px;}
       
        .bodyline {
        border-radius:10px;
        }
       
     
        .accueil-ul{
        overflow: hidden;
        width: auto;
        margin: 0;
        padding: 0;
        list-style-type: none;
        }
        .accueil-li{
          float: left;
          margin-left:6px;
          padding-left:8px;
          padding-right:8px;
          padding-bottom:5px;
        }
        .accueil-li:hover{
            margin-left:6px;
          padding-left:8px;
          padding-right:8px;
          padding-bottom:5px;
        }
        .accueil-contenu{
          padding-bottom:10px;
          padding-left:10px;
          padding-right:10px;
          padding-top:10px;
        }
       
        .postdetails.poster-profile a img
        {
        border: 6px RIDGE #FA6C6C; /*La bordure*/
        border-radius: 6px
        }
       
        .ombre
        {text-shadow: #000000 1px 1px 1px;}
        a:hover {
        text-decoration: none !important;
        }
        a { text-decoration: none; }
       
        a:hover {
        text-shadow: 1px 1px 1px #000000;
        }
       
        a:hover {
        font-variant: small-caps;
        }
       
        div.infobulle_avatar em {
        display:none;
        }
       
        div.infobulle_avatar:hover {
        background: none;
        z-index: 999;
        cursor: hand;
        position: relative;
        text-decoration:none;
        border: 0;
        }
       
        .postdetails.poster-profile textarea { background-color:#ffffff; }
       
       
        input,textarea, select {
        color : CODE COULEUR;
        font: normal 11px Verdana,Arial,Helvetica,sans-serif;
        border-color : CODE COULEUR;
        border-radius: 9px;
        border-radius: 9px;
        -webkit-border-radius: 9px;
        }
       
        /*DEBUT NOUVELLE PAGE D'ACCUEIL*/
       
        /* effet de transparance image */
       
        .transparence {
        background-color: transparent;
        border: none;
        opacity: 0.5;
        }
       
        .transparence:hover{
        background-color: transparent;
        border: none;
        opacity: 2;
        }
       
        /*-----------------inffobulles----------------- */
       
       
        div.infobulle
        {
        position: relative;
        float: left;
        color:#a37050;
        }
       
        div.infobulle span
        {
        display: none; /* ceci masque l'infobulle */
        }
        div.infobulle:hover
        {
          background: none; /* correction d'un bug IE */
          z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
          color: black;
        }
       
       
        /* style de l infobulle */
       
        div.infobulle:hover span
        {
        display: inline; /* on affiche l'infobulle */
        position: absolute;
        top: 10px; /* on positionne notre infobulle */
        background-color: #ffffff;  /* couleur du fond de l'infobulle */
        color: #FF4545; /* couleur du texte */
        padding: 3px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
        white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
        text-align: center;
        font-size: 14px;
        border-color:#FF4545; /* couleur des bordures */
        border-style:solid;
        border-width:1px 1px 1px 1px;
        }
       
        /*-----------------Titres----------------- */
        .titre{
        color:#FF4545; /* couleur de la police */
        font-weight: bold; /* épaisseur de la police en gras */
        font-size: 14px; /* taille de la police */
        text-align : center; /* alignement du texte */
        padding: 9px; /* marge intérieur */
        margin: 9px;  /* marge extérieur */
        margin-bottom: 10px; /* marge extérieure pour moi 5px en bas */
        border-bottom: 2px dotted #FF4545;  /* soulignement en pointillé */
        }
        /*-----------------Boites----------------- */
        .boite{
        color:#FF4545; /* couleur de la police */
        text-align : center; /* alignement du texte */
        font-size: 12px; /* taille de la police */
        }
       
        .boite1{
        color:#FF4545; /* couleur de la police */
        font-size: 12px; /* taille de la police */
        }
        /*-----------------Navigation----------------- */
        .chatling{
        padding: 5px; /* marge intérieur */
        margin: 4px;  /* marge extérieur */
        border: 2px dotted #FF4545;  /* soulignement en pointillé */
        border-left: none;
        border-right: none;
        width: 190px;/* taille à ne pas toucher */
        display : block;
        }
       
        .titre {border-bottom: 2px dotted #FF4545;
        }
       
        /*-----------------staff----------------- */
        .staff{
        text-align: right; /* alignement du texte */
        display : block;
        }
       
       
        /*FIN NOUVELLE PAGE D'ACCUEIL*/
       
       
        a.mainmenu:link, a.mainmenu:visited{
        background-color: #FFFFFFF;
        border-left: 1px solid #FA8525;
        border-right: 1px solid #FA8525;
        border-radius:6px;
        border: 1px #FA8525
        double;
        }
       
        a {
        outline: none;
        }
       
       
       
       
       
        barre1{
        background-color:#ffffff;border: 5px #FF4545 solid;
        border-radius : 5px 5px 5px 5px;
        height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
        font-size:15px;font-weight: bold;text-align:left;
        text-decoration: none !important;
        height:auto}
       
        .statistiques{
        border:0px;
        background-repeat: no-repeat;
        background-position: center;
        height:200px;}
       
        .groupes{
        background-color:#ffffff;border: 1px #FF4545 dotted;
        border-radius : 5px 5px 5px 5px;
        height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
        font-size:15px;font-weight: bold;text-align:center;
        text-decoration: none !important;
        height:auto}
       
       
       
        .code {
        background-color: #fefeca; /* couleur du fond */
        border:1px #FF4545 dashed; /* bordure */
        border-radius: 10px; /* tous les côtés sont arrondis */
        border-radius: 10px; /* tous les côtés sont arrondis */
        -webkit-border-radius: 10px; /* tous les côtés sont arrondis */
        color: #7B573D; /* couleur du texte */
        }
       
       
        .quote {
        background-color: #fefeca; /* couleur du fond */
        border:1px #FF4545dashed; /* bordure */
        border-radius: 10px; /* tous les côtés sont arrondis */
        border-radius: 10px; /* tous les côtés sont arrondis */
        -webkit-border-radius: 10px; /* tous les côtés sont arrondis */
        color: #7B573D; /* couleur du texte */
        }
       
       
        .spoiler_closed{
        background-color: #fefeca; /* couleur du fond */
        border:1px #FF4545 dashed; /* bordure */
        border-radius: 10px; /* tous les côtés sont arrondis */
        border-radius: 10px; /* tous les côtés sont arrondis */
        -webkit-border-radius: 10px; /* tous les côtés sont arrondis */
        color: #7B573D; /* couleur du texte */
        }
       
       
        .spoiler_content{
        background-color: #fefeca; /* couleur du fond */
        border:1px #FF4545 dashed; /* bordure */
        border-radius: 10px; /* tous les côtés sont arrondis */
        border-radius: 10px; /* tous les côtés sont arrondis */
        -webkit-border-radius: 10px; /* tous les côtés sont arrondis */
        color: #7B573D; /* couleur du texte */
        }
       
       
        .atelierprof {
        text-align:center;
        padding:9px;
        background-color:#fefeca;
        border-radius:10px;
        border:1px #FF4545 dashed; /* bordure */
        }
       
       
                /*contour des catégories*/
                .forumline{
                      border:5px solid #FF6161;
                      border-radius: 20px;
                      -webkit-border-radius: 20px;
                      border-radius: 20px;}
             
                /*titres des forums*/
                .titresfora{
                      border-radius: 20px;
                      -webkit-border-radius: 20px;
                      border-radius: 20px;
                      border: 5px solid #FF6161;
                      font-size: 11px;
                      height: 20px;
                      padding: 5px;
                      position: relative;
                      text-align: center;
                      width: 200px;}
             
             
                /*description dans les forums*/
                .forum-description {
                      margin: auto;
                      padding: 10px;
                      color: #FF6161;
                      border: 5px solid #FF6161;
                      border-radius: 14px;
                      -webkit-border-radius: 14px;
                      font-size: 12px;
                      }
             
                /*derniers messages*/
                .forum-stats {
                      border-radius: 20px;
                      webkit-border-radius: 20px;
                      border-radius: 20px;
                      border: 5px solid #FF6161;
                      font-size: 11px;
                      padding: 5px;
                      text-align: center;
                      }
       
       
       
                    .catLeft, th, .catHead, .secondarytitle{ 
                      border-radius-topleft: 10px;
                      border-radius-topright: 10px;
                      -webkit-border-top-right-radius: 10px;
                      -webkit-border-top-left-radius: 10px;
                      border-top-right-radius: 10px;
                      border-top-left-radius: 10px;}
       
                .catBottom{
                      border-radius-bottomleft: 10px;
                      border-radius-bottomright: 10px;
                      -webkit-border-bottom-right-radius: 10px;
                      -webkit-border-bottom-left-radius: 10px;
                      border-bottom-right-radius: 10px;
                      border-bottom-left-radius: 10px;}
             
             
                td.row1, td.row2, td.row3, td.row3Right{
                border-radius: 10px;
                -webkit-border-radius: 10px;}
       
       
        .button2{ border-radius: 5px;
                      -webkit-border-radius: 10px;}


       
.titretuto {
  background-color: #fefeca;
  border-top: solid #FF6161 1px;
  border-bottom: solid #FF6161 1px;
  border-right: solid #FF6161 5px;
  border-left: solid #FF6161 5px;
  border-radius : 10px 10px 10px 10px;
 -webkit-border-radius :10px 10px 10px 10px;
 text-align: center;
  width: 900px;
  display : center;
}
.fondtuto {
  background-color: #fefeca;
  border-top: solid #FF6161 1px;
  border-bottom: solid #FF6161 1px;
  border-right: solid #FF6161 5px;
  border-left: solid #FF6161 5px;
  border-radius : 10px 10px 10px 10px;
 -webkit-border-radius :10px 10px 10px 10px;
 text-align: center;
  width: 900px;
  display : center;
}
.titrebastuto {
  background-color: #fefeca;
  border-top: solid #FF6161 1px;
  border-bottom: solid #FF6161 1px;
  border-right: solid #FF6161 5px;
  border-left: solid #FF6161 5px;
  border-radius : 10px 10px 10px 10px;
 -webkit-border-radius :10px 10px 10px 10px;
 text-align: center;
  width: 900px;
  display : center;
}

a.mainmenu
{
padding-right: 3px;
background-color: #fefeca;
border: 10px solid #FF6161;
border-radius: 10px;
font-family:  Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
 }

titevivi
**

Féminin
Messages : 59
Inscrit(e) le : 05/07/2006

http://graphique-de-stars.forum-actif.net/forum.htm
titevivi a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: problème info bulle

Message par Final-Blonde le Sam 19 Nov 2011 - 20:31

Bonsoir,

Au vu de la longueur de ton CSS, tu ne pourrais pas donner juste les codes référant au message d'accueil ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle

Message par titevivi le Sam 19 Nov 2011 - 20:35

Voila:

Code:
/*DEBUT NOUVELLE PAGE D'ACCUEIL*/
     
        /* effet de transparance image */
     
        .transparence {
        background-color: transparent;
        border: none;
        opacity: 0.5;
        }
     
        .transparence:hover{
        background-color: transparent;
        border: none;
        opacity: 2;
        }
     
        /*-----------------inffobulles----------------- */
     
     
        div.infobulle
        {
        position: relative;
        float: left;
        color:#a37050;
        }
     
        div.infobulle span
        {
        display: none; /* ceci masque l'infobulle */
        }
        div.infobulle:hover
        {
          background: none; /* correction d'un bug IE */
          z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
          color: black;
        }
     
     
        /* style de l infobulle */
     
        div.infobulle:hover span
        {
        display: inline; /* on affiche l'infobulle */
        position: absolute;
        top: 10px; /* on positionne notre infobulle */
        background-color: #ffffff;  /* couleur du fond de l'infobulle */
        color: #FF4545; /* couleur du texte */
        padding: 3px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
        white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
        text-align: center;
        font-size: 14px;
        border-color:#FF4545; /* couleur des bordures */
        border-style:solid;
        border-width:1px 1px 1px 1px;
        }
     
        /*-----------------Titres----------------- */
        .titre{
        color:#FF4545; /* couleur de la police */
        font-weight: bold; /* épaisseur de la police en gras */
        font-size: 14px; /* taille de la police */
        text-align : center; /* alignement du texte */
        padding: 9px; /* marge intérieur */
        margin: 9px;  /* marge extérieur */
        margin-bottom: 10px; /* marge extérieure pour moi 5px en bas */
        border-bottom: 2px dotted #FF4545;  /* soulignement en pointillé */
        }
        /*-----------------Boites----------------- */
        .boite{
        color:#FF4545; /* couleur de la police */
        text-align : center; /* alignement du texte */
        font-size: 12px; /* taille de la police */
        }
     
        .boite1{
        color:#FF4545; /* couleur de la police */
        font-size: 12px; /* taille de la police */
        }
        /*-----------------Navigation----------------- */
        .chatling{
        padding: 5px; /* marge intérieur */
        margin: 4px;  /* marge extérieur */
        border: 2px dotted #FF4545;  /* soulignement en pointillé */
        border-left: none;
        border-right: none;
        width: 190px;/* taille à ne pas toucher */
        display : block;
        }
     
        .titre {border-bottom: 2px dotted #FF4545;
        }
     
        /*-----------------staff----------------- */
        .staff{
        text-align: right; /* alignement du texte */
        display : block;
        }
     
     
        /*FIN NOUVELLE PAGE D'ACCUEIL*/

titevivi
**

Féminin
Messages : 59
Inscrit(e) le : 05/07/2006

http://graphique-de-stars.forum-actif.net/forum.htm
titevivi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle

Message par Final-Blonde le Sam 19 Nov 2011 - 21:02

C'est juste dans cette partie que ça se joue .
/* style de l infobulle */

div.infobulle:hover span
{
display: inline; /* on affiche l'infobulle */
position: absolute;
top: 0px; /* on positionne notre infobulle -pas par le top qui est relatif entre les navigateurs */
left: 0px;
margin: 17px auto; /*top et auto ensuite*/
background-color: #ffffff; /* couleur du fond de l'infobulle */
color: #FF4545; /* couleur du texte */
padding: 3px;
border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
border-color:#FF4545; /* couleur des bordures */
border-style:solid;
border-width:1px 1px 1px 1px;
}
Si tu veux d'autres positionnements pour les autres, il faut donner d'autres identifiants comme "infobulle2" etc.
- Lez-index n'a besoin que de 1 supérieur pour avoir la priorité sur l'élément en dessous, donc 999; ne sert à rien.
- Si tu as des éléments entre les balises "div" tu peux centrer via celles-ci et inutile donc de charger ton HTML avec encore des balises >center<

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle

Message par titevivi le Dim 20 Nov 2011 - 15:56

ça ne marche pas elles ne se centre toujours pas

titevivi
**

Féminin
Messages : 59
Inscrit(e) le : 05/07/2006

http://graphique-de-stars.forum-actif.net/forum.htm
titevivi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle

Message par Final-Blonde le Dim 20 Nov 2011 - 16:12

Attends, tu dis "centrer" par rapport à quoi ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle

Message par titevivi le Dim 20 Nov 2011 - 16:18

oui pardon, on c'est peut être mal compris, j'ai dur a expliqué ces css et tout ça, c'est plus facile en image:

titevivi
**

Féminin
Messages : 59
Inscrit(e) le : 05/07/2006

http://graphique-de-stars.forum-actif.net/forum.htm
titevivi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle

Message par Final-Blonde le Dim 20 Nov 2011 - 16:37

Ah oui, on n'était pas du tout sur la même longueur d'ondes...

Alors pour les centrer exactement, il faudrait mettre une largeur en pixels à ton forum (bodylinewidth:???px;) ou alors le faire au ~ environ.
Ensuite, prendre la moitié de cette largeur et placer les infobulles par le "left" :
div.infobulle:hover span
{
display: inline; /* on affiche l'infobulle */
position: absolute;
top: 0px; /* on positionne notre infobulle -pas par le top qui est relatif entre les navigateurs */
left: 400px;
width: auto;
margin: 0 auto; /*top et auto ensuite*/
background-color: #ffffff; /* couleur du fond de l'infobulle */
color: #FF4545; /* couleur du texte */
padding: 3px;
border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
border-color:#FF4545; /* couleur des bordures */
border-style:solid;
border-width:1px 1px 1px 1px;
}

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle

Message par Invité le Mar 29 Nov 2011 - 8:54

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

Invité
Invité


Invité 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