Discussion :

[keaton7]

Bonjour,

J'utilise une astuce CSS pour gerer des infos bulles. Pas tres compliquee, on peu la retrouver sur une bonne centaine de sites du web ^^.

On inclut une balise dans une autre, et on joue avec les proprietes des sous balises en css :

Code html :

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

1
2
 
<a href='#' >C'est quoi ce lien<span>C'est un lien vers moi-meme</span></a>

Mais j'ai un petit soucis tout de meme avec ce code.

En fait je l'utilise dans une boucle php qui genere une liste . Lorsque l'on survole un lien de la liste, une infobulle s'affiche, mais les images des
elements suivant de la liste apparaissent systematiquement au dessus de mon calque (infoBulle) d'explications (peut importe la valeur de z-index).

Avez vous connaissance d'une solution a un probleme similaire ?

D'avance merci.


Matt

[c_s_s]

Bonjour,

Peux-tu donner un code HTML/CSS plus complet.
Avec ce que tu indiques, il va être difficile de trouver l'origine du problème.

Merci

[keaton7]

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
 
a.infoBulle
	{
    position:relative; 
    z-index:24;
    }
 
a.infoBulle
	{
	z-index:10;
	}
 
a.infoBulle span
	{
	display: none;
	}
 
a.infoBulle:hover span
	{ 
	display:block; 
	position:absolute;
	width:350px;
	color:black;
	top:-10px; 
	left:15px;
	padding:5px;
	z-index:99;
    }

HTML :

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
 
<tr>
  <td>
    <a href='#noanchor' class='infoBulle'>
      <img src='../style/images/book_open.png' class='inactif' />
      <span>Texte de description</span>
    </a>
  </td>
</tr>
<tr>
  <td>
    <a href='#noanchor' class='infoBulle'>
      <img src='../style/images/book_open.png' class='inactif' />
      <span>Texte de description</span>
    </a>
  </td>
</tr>
<tr>
  <td>
    <a href='#noanchor' class='infoBulle'>
      <img src='../style/images/book_open.png' class='inactif' />
      <span>Texte de description</span>
    </a>
  </td>
</tr>

J'ai volontairement reduit et simplifie le code pour pas noyer le sujet dans un flot de code sans rapport (on est d'accord que la liste comme ce ne sert a rien ^^)

[c_s_s]

Je n'arrive pas à reproduire le bug dont tu parles (peut-être me manque t-il les images à la bonne taille).

Quand je survole un lien (une image, donc), j'ai bien du texte qui apparait au dessus de l'image survolée, sans incidence sur les autres images.

Tu as une page en ligne ?