Infobulle unique ~

[Pokemon-Space]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis la création du code.
Lien du forum : http://poke-space-color.forumactif.org/

Description du problème

Hello tout le monde !
Si j'ai aujourd'hui besoin de votre aide c'est que je me vois dans l'obligation de vous la demander... En effet, je suis actuellement en train de travailler sur le prochain design de mon forum.
Avec l'approche de mes BACs blancs et des divers empêchements qui s'opposent à moi, je n'ai pas beaucoup de temps à lui consacrer : or il ne me manque plus qu'un code pour finaliser le travail...
Ce dernier code c'est celui du tableau staff. J'ai une idée très précise de ce que je veux (http://puu.sh/fsmvz/6f52afdf6f.jpg) et j'ai déjà plus ou moins réussi à la mettre en place, mais je rencontre deux problèmes, qui malgré mes multiples tentatives restent insolubles.
Le premier est que je n'arrive pas à "fixer" l'infobulle. Je m'explique... Si vous passez votre souris sur la première image (celle qui est la plus à gauche) vous verrez que l'infobulle est parfaitement positionnée, ce qui n'est pas le cas des autres images... L'idée serait donc d'avoir un background commun à toutes les infobulles mais des informations différentes dans chacune d'entre elle.
Le second est qu'il m'est impossible de mettre plusieurs polices (comme sur la capture ci-dessus) entre les balises <span></span> auquel cas le code bug totalement...

Voici les codes concernés :
CSS :

Code:

  .infobulle{position: relative;z-index: 0;}
 
.infobulle:hover{background-color: transparent;z-index: 50;}
 
.infobulle span{
position: absolute;
background-color: #cccccc;
padding: 5px;
visibility: hidden;
color: #f5f5f5;
opacity:0;
width: 270px;
height:115px;
color:#f5f5f5;
border-radius: 0px 0px 25px 25px;
transition:all 2.5s;
margin-top:226px;
margin-left:-108px;
}
 
.infobulle span img{
border: 1px;
padding: 5px;
}
 
.infobulle:hover span{
visibility: visible;
width: 270px;
height:115px;
color:#f5f5f5;
border-radius: 0px 0px 25px 25px;
opacity: 1;
margin-top:226px;
margin-left:-108x;
}


HTML :

Code:

<a class="infobulle">                  <img src="http://i38.servimg.com/u/f38/18/38/62/37/bue10.png" />      <span class="margin-top:-5px;">  BLUE      </span>                            </a> <a class="infobulle">                          <img src="http://i38.servimg.com/u/f38/18/38/62/37/bue10.png" />      <span>  LEOPOLD      </span>                                    </a>    <a class="infobulle">                          <img src="http://i38.servimg.com/u/f38/18/38/62/37/bue10.png" />      <span>  JEAN-PAULIN      </span>                                    </a> <br /> <a class="infobulle">                          <img src="http://i38.servimg.com/u/f38/18/38/62/37/bue10.png" />      <span>  SVETLANA    </span>                                    </a> 

Je conçois que ma demande est compliquée, mais j'ai réellement besoin de votre aide si je veux pouvoir être dans les temps.
(Oh et soit dit en passant, le forum concerné est mon forum test, donc si l'un de vous veut directement fouiller dans le PA, il suffit de me demander pour y avoir accès.)

Merci d'avance ~

[furb59]

Salut,

Dans le code css .infobulle span {

enleve margin-top et margin-left

met à la place :
top: tavaleur px;
left : tavaleur px;

et tu enleve position:absolute que tu remplaces en position:fixed;

ça doit le faire.

[Invité]

édit je voie que tu a reçue une réponse ,le temps que je rédige la mienne
je te la poste quand même cela va peut être t'aider
bon courage

bonjour
il doit avoir un moyen plus efficace !!

mais sinon essayer de travalier avec ceci
différencier les classes infobulle dans votre code
puis dans le css
pour un réglage indépendant de chaque infobulle ,car il me semble qu'il sont tous reglé pareil
peut être en travaillant avec des z-index aussi !!!!!

je ne suis nullement expert en la chose , mais cela me semble plus adapter
en attendant d'eventuelle reponse d'expert .
<a class infobulle intel 0
<a class infobulle intel 1
<a class infobulle intel 2
pouis dans le css c'est bien celui ci qui affiche votre fenetre en bas !!!

Code:

.infobulle intel o :over span{
margin-top: xxx;
margin-left:xxx;
margin-right: xxx;
}


Code:

.infobulle intel 1: over span{
margin-top:xxx;
margin-left:xxx;
margin-right:xxx;
}

[Pokemon-Space]

Merci vous deux pour votre réponse si rapide !
J'avais pensé à tenter de mettre la position en fixed mais pas à retirer les margin, c'est pour ça que je ne notais pas de changement... en attendant c'est un bon début, néanmoins, si vous allez voir le forum, le problème est que le background n'est pas verticalement fixe (il scroll en même temps que la page). Donc merci Furb, ta réponse ma déjà bien avancé mais je reste tout de même bloqué...
Quant à la réponse de R-max, j'avais pensé à ça, néanmoins c'est un tableau staff et ce dernier risque de s'agrandir et autant de CSS ralentirait considérablement le chargement du forum...
Bref, merci de votre aide, mais il manque encore un petit quelque chose...

[Pokemon-Space]

Petit up !

[Pokemon-Space]

Encore un up ~