Discussion :

[arnaud_verlaine]

Bonjour,
Voilà j'ai réussi à faire mes Infobulles avec l'aide de tous, bien que j'ai bidouillé et que la solution propre que je voulais au départ ne s'est pas appliquée, j'ai donc du mettre du texte pour avoir un élément à survoler autre que une balise <div> qui me permettrait d'afficher mon infobulle.
C'est chose fait et ca fonctionne pas mal, mais je suis tombé sur un autre problème !
Le texte se mets "au dessus" de la balise <div> de mes infobulles !!
Pour mieux comprendre : ici
Avez-vous une astuce qui m'aurait échappée?
Merci

modéré par denisC : ajout d'un tag au titre

[spirou]

Salut !!

Etant donné que tes liens ont des dimensions différentes, il va falloir je pense que tu affectes un id à chacun de tes liens, pour obtenir un décalage (positionnement) selon l'endroit où tu souhaites que le hover apparaisse.

Ensuite utilises aussi les pixels pour les dimensions et le positionnement, parce qu'avec les <em>, cela va être je pense plus "aléatoire".

[arnaud_verlaine]

Bonjour !
En fait mon problème est presque réglé (je dirais même à 95% ) car en jouant avec les z-index ca fonctionne sous Firefox, Mozilla, Konqueror et Opéra !! Mais pas sous Internet Explorer Ca m'aurait étonné...
Quelqu'un sait -il comment contourner ce problème?
Voici mon code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
.info{position:relative; /*this is the key*/
        color:#000000;
        text-decoration:none;
 
	  }
 
a.info:hover{
            display:block; z-index:10;/
 
		    }
 
a.info span {display: none; z-index:10;}
 
a.info:hover span{/*the span will display just on :hover state*/
               display:block;
               position:absolute;
               padding:5px;
               top:-5em;
               left:2em;
               width:15em;
               border:0px outset #0cf;
               color:#000;
               text-align: center;
               font-family:verdana;
               font-size:11px;
              z-index:10;
			   } 
.InfoBulleDirection{
position:absolute;
left:233px;
top:113px;
width:217px; 
height:65px;
border-width:0px;
border-style:solid;
background:transparent;
cursor:help;
/*Ecriture*/
font-size:11px;
font-family:arial;
font-weight:bold;
font-color:#000000;
text-align: center;
}

et mon code PHP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
</-- Affichage du bloc de la direction -->
<div class=\"InfoBulleDirection\">
<a class=\"info\" href=\"#\"  align=center>
 
   <br><font color=#0066CC>DIRECTION GENERALE</font><br>
   SOUMISSIONS<BR>
   GESTION ET SUIVI DES CHANTIERS
      <span> 
        J'affiche ici mon infobulle (code HTML)
     </span>
</a>
</div>

Merci

[denisC]

C'est peut-être un peu tard, mais j'aime bien le script info-bulles de Torvalds

Simple, clair, pratique et fonctionnant de façon bien cross-browser...

[siddh]

juste faut lancer la creation des bulles sur le window.onload pour eviter un bug dans certaines pages ie

[arnaud_verlaine]

C'est peut-être un peu tard, mais j'aime bien le script info-bulles de Torvalds

Simple, clair, pratique et fonctionnant de façon bien cross-browser...

Monsieur, Merci mais ce code ne fonctionne pas non plus sous IE !!
Le problème est le même qu'avec le mien. Sous FF ca passe impecc, sous IE passez la souris sur la barre en dessous,vous verrez que lorsque l'infobulle traverse la liste déroulante en dessous, la liste déroulante prend le dessus et reste en premier plan...
Si quelqu'un sait comment contrer cela, je l'en remercie d'avance d'éclairer ma lanterne !!

[siddh]

oui c est normal, les select sont des elements qui sont de "haut niveau" et ton div de "bas niveau".

un select sera toujours au dessus d un div.

L'astuce consiste a placer une iframe derriere ton div.

Une iframe se placera au dessus du select (grace au zindex bien sur)
et un div pourra etre au dessus de ton iframe

[arnaud_verlaine]

euh.. oui
suis pas pro dans les CSS..
Je suppose que mon texte est de bas niveau aussi alors et que c'est le problème.
Sauriez-vous montrer un peu de code au niveau de l'iframe parce que là je vois pas du tout....
Merci

[siddh]

ben en fait c est dans le code des infobulles qu'il faudrais rajouter une iframe qui soit derriere l infobulle.

je vais aller regarder ton lien

[siddh]

pour ton truc, je pense que c est plutot le z index et pas une histoire d iframe

[arnaud_verlaine]

Mais j'ai mis des z-index !
Dans la config actuelle de mon fichier CSS, si je change des z-index (j'avais essayé) ca foire partout. Ici c'est quand même bizarre que ca aille partout et pas sur IE !
Quand je bouge un peu (aléatoirement il est vrai ) à mes z-index, du coup ca va plus...
D'après mon code, vous voyez quelque chose au z-index qui n'est pas bon au niveau des valeurs ou autre?
Sinon je veux bien essayer tantot avec des iframes derrières l'info bulle hein

[siddh]

essayes ca deja :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a.info:hover span{/*the span will display just on :hover state*/ 
               display:block; 
               position:absolute; 
               padding:5px; 
               top:-5em; 
               left:2em; 
               width:15em; 
               border:0px outset #0cf; 
               color:#000; 
               text-align: center; 
               font-family:verdana; 
               font-size:11px; 
              z-index:100; 
            }

[arnaud_verlaine]

en mettant le z-index à 100, cela ne change rien pour IE...

[siddh]

ok je serais la ce soir, si t as toujours pas de solutions, on verra pour les iframe.

[arnaud_verlaine]

ok, je te remercie.
Je vais continuer à regarder à ce problème cette après-midi.
Encore merci
Cordialement,

[siddh]

franchement la je coprend pas pourquoi le texte de tes liens reste constament en premier plan

[arnaud_verlaine]

Moi non plus !!
Si quelqu'un avait une autre solution à mon problème, on peut toujours annuler cette solution et repartir avec une solution de "meilleure qualité" que celle que j'ai choisi pour le moment.. enfin une qui marche sur tous les navigateurs quoi..
Je continue à chercher mais j'avoue que je tourne en rond là...

[siddh]

ce qui est bizarre, c est que c est aleatoire ce probleme de bulles.
certaines arrivent a etre au premier plan et d autres non.
J'ai pas reussi a identifier les raisons qui font que dans certains cas c est bon et dans d autres non.

[arnaud_verlaine]

D'après ce que je peux voir seul la "ligne grise" du dessus de mon infobulle fonctionne partout. La partie centrale "en blanc" elle ne passe pas du tout je pense. Mais en effet, je ne comprend pas pourquoi..