Pb Infobulle CSS

Version imprimable

Pb Infobulle CSS

Bonjour à tous,

Je me décide enfin de m'inscrire sur ce site qui est vraiment génial, on y trouve tous ce que l'on veut!

J'ai un petit soucis avec les infobulles (celles faisant l'objet d'un tutoriel sur ce site).

Je vous expose mon problème.

J'ai mis mes infobulles sur des images, et dans cette infobulle se trouve l'image taille réelle. Le problème est que lorsque je survole une des ses images, l'image se déplace pour se mettre à la hauteur de la plus grande image.

Voici les extraits de code concernés

Le HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<tr class = "fondtableau">
  <td align="center">
    <a id="tailleplaque1" href="javascript:choixtaille(1);" class="infoGrandePlaque">
      <img src="/images/immatriculation210x130.gif" name="taille1" width="60%" border="0" id="taille1" style="<?=$taille1?>" />
      <span>
        <img src="/images/transparence.gif" border="0" id="zoomtaille1"/>
      </span>
    </a>
  </td>
  <td align="center">
    <a id="tailleplaque2" href="javascript:choixtaille(2);" class="infoPlaque">
      <img src="/images/immatriculation275x75.gif" name="taille2" width="60%" border="0" align="middle" id="taille2" style="<?=$taille2?>" />
      <span>
        <img src="/images/transparence.gif" border="0" id="zoomtaille2"/>
      </span>
    </a>
  </td>
</tr>

Le CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
a.infoPlaque {
  position:relative;
  text-decoration: none; 
  color : #000;
}
a:hover.infoPlaque {
  text-decoration: none;
  background: none;
  position:relative;
}
a.infoPlaque span {display: none;}
a:hover.infoPlaque span {
  display: inline;
  position: absolute; 
  /*top:1.5em;
  left:0.5em;*/
  bottom: 60px;
  left: 0px;
  background: #5A5D5A;
  /*border:1px solid #000;*/
  width:auto;
  text-align:center;
  font-size: 10px;
}

Je vous remercie d'avance, en espérant que quelqu'un puisse me venir en aide ;)

13/06/2007, 09h06
trotters213

:salut:
Je pense que c'est dû au fait que tu as mis position:absolute. Essaie de le supprimer.
13/06/2007, 11h36
Appollyon666

Salut,

Tout d'abord merci pour ta réponse!

J'ai testé et c'est encore pire sans le position absolute. De toute facon, cette position concerné le span, et pas l'image que l'on survole.

D'autres idées?

bonjour,

essaye ceci : j'ai corrigé la feuille de style (en bleu)
Pour les attributs des images, j'ai placé :

Code:

1
2
 
width="60%" border="0"

Code:

1
2
 
border="0"

dans l'attribut style, ajouté l'attribut alt et supprimé l'attribut name (invalide en XHTML).
Pour les dimensions des images utilise des pixels (px) plutôt que les pourcents, j'ai des résultats surprenant avec les pourcentages.

Code:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">
<!--

/* l'attribut align en HTML n'est plus valide en XHTML */
img{
 vertical-align: middle;
}

a.infoPlaque {
  /*position:relative;*/
  text-decoration: none; 
  color : #000;
}

a:hover.infoPlaque {
  text-decoration: none;
  background: none;
  /*position:relative;*/
}

a.infoPlaque span {display: none;}

a:hover.infoPlaque span {
  display: inline;
  position: absolute; 
  /*top:1.5em;
  left:0.5em;*/
  /*bottom: 60px;*/ /*cette propriété n'existe pas */  
  margin-bottom: 60px;
  /*left: 0px;*/ /*sans intéret selon moi */ 
  background: #5A5D5A;
  /*border:1px solid #000;*/
  /*width:auto;*/ /*inutile */
  text-align:center;
  font-size: 10px;
}

//-->
</style>

</head>

<body>

<table border="1">
  <tr>
    <td>


bla bla bla bla
<a href="javascript:choixtaille(2);" class="infoPlaque">
  <img src="mes images/i1.gif" id="taille2" style="border: none; width: 60px" alt=""/>
  <span>
        <img src="mes images/i1.gif" id="zoomtaille2" style="border: none;"  alt=""/>
  </span>
</a>
bla bla bla bla

    </td>
    <td>
<a href="javascript:choixtaille(2);" class="infoPlaque">
  <img src="mes images/i2.gif" id="taille3" style="border: none; width: 60px"  alt="" />
  <span>
        <img src="mes images/i2.gif" id="zoomtaille3" style="border: none;" alt=""/>
  </span>
</a>
    </td>
  </tr>
</table>


</body>

</html>

J'ai adapté le HTML pour mes tests (chemin des images) ;)

15/06/2007, 14h57
Appollyon666

bonjour,

Merci à toi pour ta réponse, elle m'a été d'un grand secours puisque maintenant le problème est résolu.

Donc par rapport à ce que tu m'a donné, j'ai quand meme remis les positions relative pour que mon infobulle soit juste au dessus de mon image.

Le problème venait de la balise bottom (qui pourtant existe pour dreamweaver...)

Encore un grand merci!