Discussion :

[nais_]

Hello à tod@s !

J'ai un petit soucis avec une info-bulle que j'ai créée : elle est transparente (enfin, on voit le texte de la page en arrière-plan ) alors que je voudrais qu'elle s'affiche par-dessus le texte de la page. (Pour mieux comprend ce que je vous raconte, je vous ai mis un aperçu en pièce jointe).

Voila le CSS pour créer une infobulle :

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
/* Info-bulles informatives */
a.information {
  color:#0066CC;
  position:relative;
}
a:hover.information {
  text-decoration: none; 
  background: none;
}
a.information span {display: none;}
a:hover.information span {
  display: block; 
  position: absolute;  
  top:-1em; 
  left:3em; 
  z-index: 20; 
  background: #9EBFE3; 
  font-family: Tahoma;
	font-size: 9pt;
  color: #FFFFFF; 
  border:1px solid #000000;
  width:35%; 
  text-align:left;
  padding:4px 4px;
}

Avant l'attribut 'display' de 'a:hover.information span' avait comme valeur 'inline' et ça me donnait le même résultat.
Est-ce que quelqu'un pourrait m'aider ?
Merci bcp par avance !

[nais_]

Y'a personne pour m'aider ?

Bon en fait ce problème je ne l'ai pas sous Mozilla : ça fctionne nickel ! Mais sous iE

Sur mes pages j'ai : un cadre principal (cadre1) qui contient deux cadres : cadre2 (pr le titre) et cadre3 (pr le contenu de la page). Et en fait, sous IE, mon infobulle n'arrive pas à s'afficher au-dessus du cadre3.... et je ne sais absolument pas pourquoi

Je vous donne le code de ma page css concernant les cadres :

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
div#cadre1 {
position:relative;
background-color:transparent;
width:99%;
margin: 5px;
border: solid 1px black;
}
    div#cadre2 {
      position:relative;
      background-color:#0066CC;
      text-align:justify;
      margin: 15px;
      border: solid 1px black;
      height:3em
      vertical-align:middle;
    }
 
    div#cadre3 {
      position:relative;
      text-align:justify;
      margin: 15px;
      border: solid 1px black;
    }

Si quelqu'un trouve ce qui cloche je lui en serais extrêmement reconnaissante !
Merci.

[Auteur]

bonjour,

#cadre1, #cadre2, #cadre3 sont en position: relative. Supprime cet attribut.

Par ailleurs pour le span remplace :

Code :

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

background: #9EBFE3;

par

Code :

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

background-color: #9EBFE3;

[nais_]

Merci Auteur pour ton aide
J'ai opéré les modifications, malheureusement mon infobulle s'affiche tjs en-dessous du texte de la page en cours

[Auteur]

curieux , je n'ai pas ce souci sur IE et FF. Sous Firefox, j'ai juste un petit problème au niveau de la coordonnée Y (top).

Ou se trouvent tes liens ? Sont-ils dans les cadres ou en dehors des cadres ? Sont-ils dans un éléments particulier (un autre div par exemple qui a ses propriétés) ?