Comment positionner une infobulle à un endroit prédéfini?

Bonjour à tous,

J'ai trouvé une infobulle assez interessant en CSS.

Je suis en train de l'adapter à mes besoins à savoir une grande infobulle (500x500)
Dans cette optique, il faut que l'infobulle se positionne à une position prédéfinie faute de quoi 9 fois sur 10 elle sortira de l'écran...
J'ai bidouillé de partout pour trouver la solution, je n'y arrive pas.
Quelqu'un peut il m'aider?
Il s'agirait par exemple de définir une position YX pour l'infobulle quelque soit la position du lien qui l'appelle...
Une position relative à l'écran et non relative à la position de la souris.

Merci por votre aide.

Voici le code:

p
{
  font-size       : 1.1em; /* Définition de la taille de la police de nos paragraphes */
}
 
a.info_bulle
{				
  color           : #2F368A;
  
  text-decoration : none; 
  
  padding         : 2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */
  
  /* Définition de l'arrière plan de notre lien */
  background      : transparent url('comment.gif') no-repeat right center;
  
  position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */ 
}  
 
a.info_bulle:hover 
{
  border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
} 

/* Rend invisible tout notre bloc span */
a.info_bulle span.info_bulle 
{								   
  position   :  absolute;
  top        :  -2000em;
  left       :  -2000em;
  width      :  1px;
  height     :  1px;
  overflow   :  hidden; 
} 

/* Rend visible tout notre bloc span et lui attribue une taille */
a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle
{
  top        :  auto;
  left       :  auto;
  width      :  507px;
  height     :  auto;
  overflow   :  visible;
} 

span.header
{
   display         : block; 
   height          : 45px;  /* Hauteur correspondant à celle de notre image. ----MODIFICATION 35=>45---- */
   line-height     : 220%;  /* Propriété qui centrera le texte verticalement */
   text-align      : center;
   background      : transparent url('./images/css/bulle_societes/top.gif') no-repeat 0 0; 
   font-size       : 15px; 
   font-weight     : bold;
} 

span.content
{
   display     : block; 
   height      : 396px;  /* Hauteur correspondant à celle de notre image. ----LIGNE RAJOUTEE---- */
   background  : transparent url('./images/css/bulle_societes/centre.gif') repeat-y;
   padding     : 0 8px;
} 

span.footer
{
   display     : block; 
   height      : 48px; /* ----MODIFICATION 5=>48px ----- */
   background  : url('./images/css/bulle_societes/bot.gif') no-repeat bottom left; 
   font-size   : 0; /* Corrige l'espacement inutile sous IE */
}         
                

idamarco a écrit :
Il s'agirait par exemple de définir une position YX pour l'infobulle quelque soit la position du lien qui l'appelle...

Il faut créer ton infobulle comme un contenu séparé du lien, et pas comme une «infobulle CSS» qui est souvent un système non accessible et exploitant abusivement la pseudo-classe :hover. Tu pourras ensuite gérer l'affichage de l'infobulle via JavaScript, en exploitant les évènements mouseover, mouseout, focus et blur. Il faudra aussi réfléchir à l'accès aux contenus si JS est désactivé.

Voilà pour faire bien. Mais si tu veux juste modifier le code existant (et sans garantie que ça marche), il faut:
1. positionner en relatif un conteneur principal;
2. supprimer le positionnement relatif des liens;
3. remplacer les valeurs "auto" pour les propriétés top et left par les coordonnées souhaitées.

Mais si tu as un contenu important (500x500 px...), tu n'aurais pas plutôt intérêt à utiliser un script tel que Lightbox?

Bonjour Florent,
Merci pour ta réponse.
Je prends bonne note de tes conseils sur le CSS et les infobulle.
Première chose: je suis un amateur, ce qui peut expliquer mes erreurs d'appréciation.
Ensuite, au début de mon projet, je ne voulais pas de javascript pour que le site soit consultable par un maximum.
J'ai tellement galèré sur certains aspects de mon projet à vouloir éviter le JS que tout compte fait (et sur les conseils de certains) je me suis ouvert au JS et j'en ai sur mon site.
Donc pourquoi pas du javascript en effet.

Je dois faire une infobulle qui contiendra des images et du texte (pourquoi pas des liens aussi...).
Ces informations seront prises dans une BDD...
Je cherche à faire du classieux car mon site parle "prestige"...
As tu des adresses de lightbox à me conseiller?

Thanks again
Modifié par idamarco (17 Feb 2009 - 00:16)

Florent,

C'est une excellente idée que tu viens de me donner...
Génial.
Il me faut trouver une lightbox qui s'active au passage de la souris.
Qui admette plusieurs images et qui prennent ces dernières comme le texte contenu dans ma base///
Si toi ou nos petits collègues connaissez une adresse de jolies LBox, je suis preneur...

Merci encore pour l'idée.