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 le 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.

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
****

Féminin
Messages : 269
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 Morane le 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;
    }

Morane
**

Féminin
Messages : 76
Inscrit(e) le : 18/08/2014

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

Résolu Re: infobulle coincé dans cardre

Message par kiarie le 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
****

Féminin
Messages : 269
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 Morane le 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;
    }

Morane
**

Féminin
Messages : 76
Inscrit(e) le : 18/08/2014

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

Résolu Re: infobulle coincé dans cardre

Message par kiarie le 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
****

Féminin
Messages : 269
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 Morane le Mer 16 Mar 2016 - 18:42

De rien avec plaisir

Bien à toi ::fleur::

Morane
**

Féminin
Messages : 76
Inscrit(e) le : 18/08/2014

Morane 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