Pb Infobulle CSS

**Appollyon666** · 12/06/2007, 14h43

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 HTML :

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
<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 :

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
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

**trotters213** · 13/06/2007, 09h06

Je pense que c'est dû au fait que tu as mis position:absolute. Essaie de le supprimer.

**Appollyon666** · 13/06/2007, 11h36

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?

**Auteur** · 14/06/2007, 19h57

bonjour,

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

Code html :

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

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

et

Code html :

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

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 html :

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
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)

**Appollyon666** · 15/06/2007, 14h57

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!

Pb Infobulle CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager