infobulle coincé dans cardre

[kiarie]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lost-island.nice-boards.net/

Description du problème

Bonjour a tous !

Alors voila ça fait deux heures que je suis en train de m'arracher les cheveux a cause d'un code d'infobulle. Bien que je me débrouille de mieux en mieux en codage de base, je reste encore bien novice et ça je ne trouve pas la solution même en grattouillant partout sur google.

Dans le cadre de la création d'un nouveau PA je voulais faire des infos bulles pour la présentation du staff ou au passage de la souris sur une image, la bulle affichant alors une image et des info sur le même du staff concerné.

Mon souci étant qu'en position "relative" la bulle s'ouvre a l'intérieur du cadre de mon PA ce qui n'est pas beau mais que si je met une position "absolute" les 3 images de staff s’imbrique les uns sur les autres.

Et encore sur la version absolute si on voit un peu les images dépassé c'est que je les ai placé dans une table. J'ai essayé 36 000 trucs différents, jamais rien ne marche et même si généralement j'ai trouver les erreurs par moi même pour mieux apprendre la ce code me rend folle donc pitié aidez moi x)

voici le code et le css

Code:

<td>
<div class="titrepa">Staff</div>
<div  class="cadrepa" style="width:275px;overflow: auto;">
<br /><center><div style="height:102px; padding: 3px; overflow: auto; text-align:center;">
<center><table><tr><td>
<div class="imagesurvole"><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg"><span><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-200x100.jpg"><strong>Prenom Nom 1</strong><br />Rang<br /><a href="http://" class="postlink" target="_blank" rel="nofollow">Proil</a> | <a href="http://" class="postlink" target="_blank" rel="nofollow">MP</a></span></div>
</td><td><div class="imagesurvole"><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg"><span><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-200x100.jpg"><strong>Prenom Nom 2</strong><br />Rang<br /><a href="http://" class="postlink" target="_blank" rel="nofollow">Proil</a> | <a href="http://" class="postlink" target="_blank" rel="nofollow">MP</a></span></div>
</td><td><div class="imagesurvole"><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg"><span><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-200x100.jpg"><strong>Prenom Nom 3</strong><br />Rang<br /><a href="http://" class="postlink" target="_blank" rel="nofollow">Proil</a> | <a href="http://" class="postlink" target="_blank" rel="nofollow">MP</a></span></div>
</td></tr></table></center>
</center></div></div>
<td>

Code:

.imagesurvole {
  text-decoration:none;
  position:relative; /*ici que je change entre relative et absolute*/
}
.imagesurvole span {
  display:none;
  border: 1px solid #40313B;
  color: #40313;
  background: #E8E4ED;
}
.imagesurvole span img {
  margin:0px 8px 8px 0;
}
.imagesurvole:hover span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index: 999;
  width:auto;
  max-width:200px;
  border: 1px solid #40313B;
  margin-top:10px;
  margin-left:10px;
  overflow:hidden;
  padding:10px;
}

[Invité]

Bonjour kiarie
change ton css par celui la

Code:

    .imagesurvole {
      text-decoration:none;
 /*    position:relative; /*ici que je change entre relative et absolute*/
    }
    .imagesurvole span {
      display:none;
      border: 1px solid #40313B;
      color: #40313;
      background: #E8E4ED;
    }
    .imagesurvole span img {
      margin:0px 8px 8px 0;
    }
    .imagesurvole:hover span {
      display:block;
      position:absolute;
/*      top:0;
      left:0;*/
      z-index: 999;
      width:auto;
      max-width:200px;
      border: 1px solid #40313B;
      margin-top:10px;
      margin-left:10px;
      overflow:hidden;
      padding:10px;
    }

[kiarie]

ça marche !!! *.*

Merci infiniment! Ce code m'a vraiment rendu chèvre et au final je vois que c'est pour pas grand chose (mais que je n'aurais jamais trouvé seule) Merci merci merci ! <3

EDIT//

Heuuuu en fait une fois ma joie passé et avoir regardé de plus prêt en faite ce n'est pas exactement bon x) Avec ton code je ne peux pas passer la souris sur la bulle et donc pouvoir cliquer sur les liens de mp et profil

[Invité]

voici une modif

Code:

    .imagesurvole {
      text-decoration:none;
 /*    position:relative; /*ici que je change entre relative et absolute*/
          
    }
    .imagesurvole span {
      display:none;
      border: 1px solid #40313B;
      color: #40313;
      background: #E8E4ED;
    }
    .imagesurvole span img {
      margin:0px 8px 8px 0;
    }
    .imagesurvole:hover span {
      display:block;
      position:absolute;
     top: 60px !important; /* a toi de jouer sur ce paramètre */
/*      left:0;*/
      z-index: 999;
      width:auto;
      max-width:200px;
      border: 1px solid #40313B;
      margin-top:10px;
      margin-left:10px;
      overflow:hidden;
      padding:10px;
    }

[kiarie]

Ah merci! J'allais édité a nouveau pour dire avoir trouvé la solution, en faite j'ai tout betement mis les marge de imagesurvole:hover span en négative et ça marche!

Merci encore pour ton aide!

[Invité]

De rien avec plaisir

Bien à toi