infobulle coincé dans cardre

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

Résolu infobulle coincé dans cardre

Message par kiarie Mer 16 Mar 2016 - 17:16

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.
infobulle* - infobulle coincé dans cardre 242597parelative infobulle* - infobulle coincé dans cardre 603807paabsolute
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;
}


Dernière édition par kiarie le Mer 16 Mar 2016 - 18:40, édité 3 fois
kiarie

kiarie
****

Féminin
Messages : 281
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle coincé dans cardre

Message par Invité Mer 16 Mar 2016 - 18:17

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;
    }
Anonymous

Invité
Invité


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

Résolu Re: infobulle coincé dans cardre

Message par kiarie Mer 16 Mar 2016 - 18:29

ç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 Mad
kiarie

kiarie
****

Féminin
Messages : 281
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle coincé dans cardre

Message par Invité Mer 16 Mar 2016 - 18:40

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;
    }
Anonymous

Invité
Invité


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

Résolu Re: infobulle coincé dans cardre

Message par kiarie Mer 16 Mar 2016 - 18:41

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! Smile
kiarie

kiarie
****

Féminin
Messages : 281
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle coincé dans cardre

Message par Invité Mer 16 Mar 2016 - 18:42

De rien avec plaisir

Bien à toi ::fleur::
Anonymous

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

- Sujets similaires

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