Infobulle "coincée" dans le "div".

[Offrande]

Bonjour à tous, 

En cette petite matinée, je vient solliciter votre aide pour mon petit PA, message d’accueil. 
Je possède donc un "PA" qui contient plusieurs blocs, de base les blocs on tous la même class mais j'ai personnaliser 2 blocs en leurs attribuent des class. Ma première personnalisation as très bien fonctionner et je n'ai eu aucun soucis, tendis que ce matin l'hors de la personnalisation de mon deuxième bloc qui contient des images avec infobulles au survoles nommé "Membre du Staff" et avec la class : .pa_staff .. as quelque problème.

1° - L'hors du survol des miniature l'infobulle est a moitié cacher dans le cadre ce qui empêche sa visibilité entière et totale. 

2° - L'overflow poser dans le cadre ne vas pas jusque en bas, il y as une légère marge en bas (bottom).

Voila le code entier de mon PA mais la partis concerner et espacer du reste : 

Code:

<table cellpadding="3" cellspacing="2" id="tfa_table">
    <tr>
      <td rowspan="2" width="80" height="100" style="background-color: #DAD97D"> <div class="bloc-actu-pa">
        <p> <strong>A l'actu :</strong><br><br><br><br>
          <strong>Septembre, 6 /2o13</strong> - Le Grand Havre adoptera bientôt une autre hiérarchie dans ces Tanières pour plus de facilités et un affichage moins grand. Question d’esthétique et de facilité de navigation sont à venir prochainement.  
<br>
          <strong>Recrutement Animateurs, Animatrices</strong> - Le Havre recherche des personnes souhaitent pourvoir à ce post. Quatre places sont de nécessité avant l'ouverture Officiel du Havre pour l'ambiance et l'animation.
<br><br>
          <strong>Septembre, 4 /2o13</strong> - Maintenance du Grand Havre risque de gêner les fonctionnalité de celui-ci pendant quelque jours. Merci de votre  patience.
<br><br>
          <strong>Janvier, 1/2o13</strong> - Imagination et sortis du Grand Havre sur la Toile.
        </p> </div>      
      </td><td colspan="2" style="background-color: #DAD97D;"  width="100%"><p class="text_imag">
Bonjour, </br>
Ici vous trouverez le contexte du Grand Havre ainsi qu'un petit bout de son histoire  mais celui-ci n'est pas encore écrit pour le moment, merci de votre patience chers membres ! Ici vous trouverez le contexte du Grand Havre ainsi qu'un petit bout de son histoire  mais celui-ci n'est pas encore écrit pour le moment, merci de votre patience chers membres !Ici vous trouverez le contexte du Grand Havre ainsi qu'un petit bout de son histoire  mais celui-ci n'est pas encore écrit pour le
</p>
      </td>
    </tr>
    <tr>    
 
      <td id="igauche" valign="top">
        <h1> Espace Equideow </h1>
        <p style="padding-left: 15px;">
          <img src="http://i79.servimg.com/u/f79/17/99/16/25/puce_d11.gif" alt="" />  Liste des Services <br />
          <img src="http://i79.servimg.com/u/f79/17/99/16/25/puce_d11.gif" alt="" />  Liste des Astuces <br />
          <img src="http://i79.servimg.com/u/f79/17/99/16/25/puce_d11.gif" alt="" />  Liste des Spoilers  <br />
          <img src="http://i79.servimg.com/u/f79/17/99/16/25/puce_d11.gif" alt="" />  Nos Aides et Dons <br />
          <img src="http://i79.servimg.com/u/f79/17/99/16/25/puce_d11.gif" alt="" />  Chambre des Mystères et Ignorés
  </p>
      </td>  
      <td id="idroite" valign="top">
        <h1> Espace Havre </h1>
        <p style="padding-right: 15px;padding-left: 20px;">
          <img src="http://i79.servimg.com/u/f79/17/99/16/25/puce_d11.gif" alt="" />  Bien débutez sur le Havre<br />
          <img src="http://i79.servimg.com/u/f79/17/99/16/25/puce_d11.gif" alt="" />  Gagnez encore plus de Paillettes!<br />
          <img src="http://i79.servimg.com/u/f79/17/99/16/25/puce_d11.gif" alt="" />  Galoper sur le Domaine <br />
          <img src="http://i79.servimg.com/u/f79/17/99/16/25/puce_d11.gif" alt="" />  Foire au Questions <br />
          <img src="http://i79.servimg.com/u/f79/17/99/16/25/puce_d11.gif" alt="" />  Les Cookies Pistaches - Vanille
        </p>
      </td>
    </tr>
    <tr>


      <td valign="top">
        <!-- PARTENAIRES -->
        <h1>Partenaires du Havre</h1>
<script type="text/javascript">
 $(function() {
  $('.bloc-tfa').hover(function(){
  $(this).find('porte').animate({top:'120px'},{queue:false,duration:500});
  }, function(){
  $(this).find('porte').animate({top:'0px'},{queue:false,duration:500});
  });
});
</script>
        <div class="bloc-tfa">
       <img src="http://i34.servimg.com/u/f34/17/99/16/25/porte_11.jpg" alt="porte" />
  <p>
 </br>
Templactif </br>
Never Utopia </br>
ForumActif </br>
Milouze14</br>
Premade Chevaux de Looserfaceman
 </p>
</div>
</td>



















      <td valign="top"><div class="pa_staff">
        <h1> Fondatrice du Havre</h1>
 <!-- PREMIERE INFOBULLE -->
        <div class="tfabulle">
          <div class="imgstaff"> <img  alt=""
src="http://i34.servimg.com/u/f34/17/99/16/25/offran11.jpg" />  </div>  
          <div class="in_bulle">      
            <h2>Offrande . Fondatrice</h2>      
            <p>        
              <img src="http://i34.servimg.com/u/f34/17/99/16/25/offran12.jpg" />        
              <br />        
              <a href="http://le-grand-havre.lovelyforum.net/u1">Profil</a>  <a href="http://le-grand-havre.lovelyforum.net/privmsg?mode=post&u=1">MP</a>      
            </p>      
          </div>    
        </div>  

               <div style="clear:both;"></div>

<h1> Modératrice du Havre</h1>

       <!-- SEPTIEME INFOBULLE -->
        <div class="tfabulle">
      <div class="imgstaff">    <img  alt=""
src="http://i34.servimg.com/u/f34/17/99/16/25/chalma11.jpg" />    </div>
          <div class="in_bulle">      
            <h2>Chalma. Modératrice</h2>      
            <p>        
              <img src="http://i34.servimg.com/u/f34/17/99/16/25/chalma12.jpg" />        
              <br />        
              <a href="http://le-grand-havre.lovelyforum.net/u8">Profil</a>  <a href="http://le-grand-havre.lovelyforum.net/privmsg?mode=post&u=8">MP</a>      
            </p>    
          </div>    
        </div>

    <!-- QUATRIEME INFOBULLE -->
        <div class="tfabulle">
        <div class="imgstaff">  <img  alt=""
src="http://i34.servimg.com/u/f34/17/99/16/25/kaelic11.jpg" />    </div>
          <div class="in_bulle">      
            <h2>Kaelice. Modératrice</h2>      
            <p>        
              <img src="http://i34.servimg.com/u/f34/17/99/16/25/kaelic12.jpg" />        
              <br />        
              <a href="http://le-grand-havre.lovelyforum.net/u7">Profil</a>  <a href="http://le-grand-havre.lovelyforum.net/privmsg?mode=post&u=7">MP</a>      
            </p>      
          </div>    
        </div>  

        <!-- TROISIEME INFOBULLE -->
        <div class="tfabulle">
          <div class="imgstaff"> <img  alt=""
src="http://i34.servimg.com/u/f34/17/99/16/25/jenifa11.jpg" />    </div>
          <div class="in_bulle">      
            <h2>Jenifaël . Modératrice</h2>      
            <p>        
              <img src="http://i34.servimg.com/u/f34/17/99/16/25/jenifa12.jpg" />        
              <br />        
              <a href="http://le-grand-havre.lovelyforum.net/u5">Profil</a>  <a href="http://le-grand-havre.lovelyforum.net/privmsg?mode=post&u=5">MP</a>      
            </p>      
          </div>    
        </div>  

       <!-- DEUXIEME INFOBULLE -->
        <div class="tfabulle">
          <div class="imgstaff"> <img  alt=""
src="http://i34.servimg.com/u/f34/17/99/16/25/mado11.jpg" />    </div>
          <div class="in_bulle">      
            <h2>-Mado- . Modératrice</h2>      
            <p>        
              <img src="http://i34.servimg.com/u/f34/17/99/16/25/madog10.jpg" />        
              <br />        
              <a href="http://le-grand-havre.lovelyforum.net/u11">Profil</a>  <a href="http://le-grand-havre.lovelyforum.net/privmsg?mode=post&u=11">MP</a>      
            </p>      
          </div>    
        </div>  

        <div style="clear:both;"></div>

 <h1> Correctrice du Havre</h1>

        <!-- SIXIEME INFOBULLE -->
        <div class="tfabulle">
       <div class="imgstaff">   <img  alt=""
src="http://i34.servimg.com/u/f34/17/99/16/25/gevaly10.jpg" />    </div>
          <div class="in_bulle">      
            <h2>Gevalyon. Correctrice</h2>      
            <p>        
              <img src="http://i34.servimg.com/u/f34/17/99/16/25/gevaly11.jpg" />        
              <br />        
              <a href="http://le-grand-havre.lovelyforum.net/u6">Profil</a>  <a href="http://le-grand-havre.lovelyforum.net/privmsg?mode=post&u=6">MP</a>      
            </p>      
          </div>    
        </div>  

 <div style="clear:both;"></div>
</div>
      </td>























      <td valign="top">
        <h1>© Crédits</h1>
        <p>
<strong>Le Grand Havre ©</strong> </br>
<i>Créer le o1 Janvier 2o13</i>
Codage et Graphisme par : <strong>©Sick Créations</strong>, </br>
avec l'aide admirative de nos partenaires, le Havre remercie : </br>
Equideow.com ainsi que l'équipe <strong>©Owlient</strong></br>de leurs autorisation à afficher leurs créations. </br>Pour tous renseignement face au publications</br> du forum veuillez contactez Offrande,</br>fondatrice à 'contacte'.</br></br>Toute reproduction même partielle </br>est strictement interdite et sera sévèrement punie.

</p>

</td></tr></table>

Voila, le CSS de tout mon PA : 

Code:

/* CONFIGURATION DE LA TABLE */



#tfa_table{
  width: 100%;
  color: black;
  font: 11px Time;
  background-image: url(http://i34.servimg.com/u/f34/17/99/16/25/fondb10.jpg);
  background-repeat: repeat-y repeat-x;
  margin: 0px auto;
  border-top: 10px solid #000000;
  border-bottom: 10px solid #000000;
  border-right: 0;
  border-left: 0;
}

/* CELLULES */
#tfa_table td{
  background-image: url(http://img4.hostingpics.net/pics/325804forumline01.jpg),
    url(http://img4.hostingpics.net/pics/153172forumline03.jpg),
    url(http://img4.hostingpics.net/pics/440794forumline11.jpg),
    url(http://img4.hostingpics.net/pics/902555forumline10.jpg),
    url(http://img4.hostingpics.net/pics/947525forumline03.png),
    url(http://img4.hostingpics.net/pics/158730forumline13.png),
    url(http://img4.hostingpics.net/pics/300218forumline18.png),
    url(http://img4.hostingpics.net/pics/782072forumline09.png),
    url(http://img4.hostingpics.net/pics/151721forumline05.jpg);
background-position: top left, top right, bottom right, bottom left, top center, right center, bottom center, left center, top left;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-x, repeat-y, repeat;
border: 2px solid #000000;
margin: 3px;
padding: 5px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow:  2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
border-radius: 12px 3px 12px 3px ;
-webkit-transition-property: border-radius;
-webkit-transition-duration: 1s;
}

#tfa_table td:hover {
border-radius: 3px 12px 3px 12px;
}

/* LES LIENS */
#tfa_table a{
  text-decoration: small-caps;
  color:#000000;
}
/* TITRES */
#tfa_table h1{
  font-size: 20px;
  font-family: "Niconne";
  margin: 3px auto;
  padding: 0;
  color:  #000000;
  border-bottom: 1px solid #000000;
  text-shadow: 1px 1px 12px #ffffff;
}  

/* PARAGRAPHE CONTENANT LE TITRE DU FORUM (ou texte de bienvenu) */
.text_imag{
  color: #000000;
  vertical-align: middle;
  text-align: justify;
  font: 12px #000000 Time;
  font-weight: bold;
  padding: 17px;
  text-shadow: 1px 1px 12px #ffffff;
  border-radius: 12px 3x 12px 3px;
  -webkit-transition-property: border-radius;
  -webkit-transition-duration: 1s;
}

.text_imag:hover {
border-radius: 3px 12px 3px 12px;
}

/* CELLULE AVEC FOND DECO DE GAUCHE */
#igauche{
  background-image: url(http://img4.hostingpics.net/pics/325804forumline01.jpg),
    url(http://img4.hostingpics.net/pics/153172forumline03.jpg),
    url(http://img4.hostingpics.net/pics/440794forumline11.jpg),
    url(http://img4.hostingpics.net/pics/902555forumline10.jpg),
    url(http://img4.hostingpics.net/pics/947525forumline03.png),
    url(http://img4.hostingpics.net/pics/158730forumline13.png),
    url(http://img4.hostingpics.net/pics/300218forumline18.png),
    url(http://img4.hostingpics.net/pics/782072forumline09.png),
    url(http://img4.hostingpics.net/pics/151721forumline05.jpg);
background-position: top left, top right, bottom right, bottom left, top center, right center, bottom center, left center, top left;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-x, repeat-y, repeat;
  border: 2px solid #000000;
  padding: 4px;
  border-radius: 12px 3px 12px 3px ;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow:  2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
  -webkit-transition-property: border-radius;
  -webkit-transition-duration: 1s;
}

#igauche:hover {
border-radius: 3px 12px 3px 12px;
}

/* CELLULE AVEC FOND DECO DE DROITE */
#idroite{
  background-image: url(http://img4.hostingpics.net/pics/325804forumline01.jpg),
    url(http://img4.hostingpics.net/pics/153172forumline03.jpg),
    url(http://img4.hostingpics.net/pics/440794forumline11.jpg),
    url(http://img4.hostingpics.net/pics/902555forumline10.jpg),
    url(http://img4.hostingpics.net/pics/947525forumline03.png),
    url(http://img4.hostingpics.net/pics/158730forumline13.png),
    url(http://img4.hostingpics.net/pics/300218forumline18.png),
    url(http://img4.hostingpics.net/pics/782072forumline09.png),
    url(http://img4.hostingpics.net/pics/151721forumline05.jpg);
background-position: top left, top right, bottom right, bottom left, top center, right center, bottom center, left center, top left;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-x, repeat-y, repeat;
  border: 2px solid #000000;
  padding: 4px;
  border-radius: 12px 3px 12px 3px ;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow:  2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
  -webkit-transition-property: border-radius;
  -webkit-transition-duration: 1s;
}
#idroite:hover {
border-radius: 3px 12px 3px 12px;
}


/* INFOBULLES */
.tfabulle{
  position: relative;
  float: left;
  margin: 3px;
  padding: 5;
}
/* PARTIE MASQUEE DE L INFOBULLE */
.in_bulle {
  display: none;
  margin: 0;
  padding: 0;
}
/* CONFIGURATION-PARAMÈTRES DE L INFOBULLE VISIBLE AU SURVOL */
.tfabulle:hover .in_bulle{
  background-image: url(http://i34.servimg.com/u/f34/17/99/16/25/back2210.jpg);
  border: 1px solid #000000;
  position: absolute;
  z-index: 999;
  display: block;
  width: auto;
  margin: 0;
  padding:3px;
  top: 62px;
  left: 35px;
  text-align: center;
  -moz-border-radius: 7px ;
  -webkit-border-radius: 7px ;
  border-radius:7px ;
  -moz-box-shadow: 0px 0px 4px #000;
  -webkit-box-shadow: 0px 0px 4px #000;
  box-shadow: 0px 0px 4px #000;
}
/* PARAGRAPHE DE L INFOBULLE */
.in_bulle p{
  color: #000000;
  margin: 0;
  padding: 0;
}
/* TITRE DANS L INFOBULLE */
.in_bulle h2{
  font: 11px Time;
  color:#000000;
  border-bottom: 1px solid #000000;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* LOGO MEMBRES DU STAFF */
.imgstaff:hover {
-webkit-transform: matrix(0.970,0.241,-0.241,0.970,0,0);
-moz-transform: matrix(0.970,0.241,-0.241,0.970,0px,0px);
-ms-transform: matrix(0.970,0.241,-0.241,0.970,0,0);
-o-transform: matrix(0.970,0.241,-0.241,0.970,0,0);
transform: matrix(0.970,0.241,-0.241,0.970,0,0);
}


/* PORTE COULLISSANTE PARTENAIRE ET ACCUEIL */
/* LE BLOC PRINCIPAL */
.bloc-tfa {
background: #DAD97D;
position: relative;
overflow: hidden;
height: 233px;
width: 179px;
padding: 0;
margin: 0;
border: none;
}
/* PARAGRAPHE */
.bloc-tfa p {
height: 233px;
width: 179px;
margin: 0 auto;
padding: 0;
color: #0000000;
}
/* POSITION DE L IMAGE */
.bloc-tfa img {
position: absolute;
top: 0;
left: 0;
}

/* - - - LES BLOCS DU PA - - - */
.bloc-actu-pa  {
overflow: auto!important;
max-height: 300px!important;
}

.pa_staff {
overflow-y: auto!important;
overflow-x: none!important;
max-height: 233px!important;
margin-bottom: -30px!important;
}

Et voila surtout la partis concernent mon petit cadre que j'ai personnaliser en attribuant une class : 

Code:

.pa_staff {
overflow-y: auto!important;
overflow-x: none!important;
max-height: 233px!important;
margin-bottom: -30px!important;
}

Je vous remercie vraiment beaucoup et d'avance de votre aide pour ce petit soucis que je n'arrive pas à résoudre et vous souhaite une excellente journée. 

Tendrement, Offrande.

[Invité]

Salut Offrande,

modifies simplement ceci:

Code:


        .pa_staff {
        overflow-y: auto!important;
        overflow-x: none!important;
        max-height: 233px!important;
        margin-bottom: -30px!important;
        }


Par:

Code:


.pa_staff
{
height: auto;
}


Puis ceci:

Code:


.tfabulle:hover .in_bulle{
  background-image: url(http://i34.servimg.com/u/f34/17/99/16/25/back2210.jpg);
  border: 1px solid #000000;
  position: absolute;
  z-index: 999;
  display: block;
  width: auto;
  margin: 0;
  padding:3px;
  top: 62px;
  left: 35px;
  text-align: center;
  -moz-border-radius: 7px ;
  -webkit-border-radius: 7px ;
  border-radius:7px ;
  -moz-box-shadow: 0px 0px 4px #000;
  -webkit-box-shadow: 0px 0px 4px #000;
  box-shadow: 0px 0px 4px #000;
}


Modifies le top  par:

Code:

bottom: 10px;

Pense à cliquer sur le bouton
a++

[Offrande]

Coucou, 

Merci beaucoup mon cher Milouze!
Tout cela a arranger mon soucis mais il m'en reste 1 petit pour que la mise en forme soit complète : 

Je souhaiterais mettre la un overflow dans le cadre "staff" car il risque de s'agrandir encore dans la hauteur et je ne veut vraiment pas qu'il dépasse la taille qu'il as maintenant. 

Merci encore une fois à toi mon Sauveur 14
Je te souhaite une excellente journée et plein de bisous.

[Invité]

Salut Offrande ,

Ceci devrait régler l'affaire  

Code:


.pa_staff
{
height: 280px;
overflow-y: auto!important;
overflow-x: none!important;
}


et ici

Code:


       
        .tfabulle:hover .in_bulle{
          background-image: url(http://i34.servimg.com/u/f34/17/99/16/25/back2210.jpg);
          border: 1px solid #000000;
          position: absolute;
          z-index: 999;
          display: block;
          width: auto;
          margin: 0;
          padding:3px;
          bottom: 10px;
          left: 35px;
          text-align: center;
          -moz-border-radius: 7px ;
          -webkit-border-radius: 7px ;
          border-radius:7px ;
          -moz-box-shadow: 0px 0px 4px #000;
          -webkit-box-shadow: 0px 0px 4px #000;
          box-shadow: 0px 0px 4px #000;
        }


modifies ces valeurs :

Code:

bottom: 10px;
left: 35px;

Par:

Code:


top:0;
left:0;


a++

[Offrande]

Bonjour Milouze, 

Merci beaucoup pour l'ajustement des codes, 
la marge du bas a bien disparut et le scroll est entier dans le bloc.

Reste un dernier soucis, 
Les infobulles : Elles sont "bloquer" dans le bloc et donc, certaine ne s'affichent pas entièrement. Serait-il possible de les faire s'afficher hors du cadre pour que les bords de celui-ci ne les coupent pas? Regarde ici ^.^

Merci encore (beaucoup) de ton aide.

[Invité]

Salut Offrande,

pour un affichage total de tes infobulles ,
il faut supprimer l'overflow et attribuer une largeur définie
pour afficher tout le contenu.
Dans ce cas de figure, tu verras toutes tes infobulles  .

a++

[Offrande]

Coucou, 

D'accord, merci beaucoup. 
Dans ce cas je pense que je vais les laisser ainsi car avec tout ce que je doit noter, je pense que la longueur vas être grand ... très grande donc on vas garder l'overflow!

En tout cas merci beaucoup de ton aide, tu est un vrai pro !  

Je te souhaite une bonne journée et met le sujet en mode résolus =) !