[CSS] Faire une info-bulle avec internet explorer...

Faire une info-bulle avec internet explorer... [CSS] - HTML/CSS - Programmation

Marsh Posté le 28-06-2007 à 11:48:34    

Salut !
 
J'ai un petit problème avec le CSS
je voudrais qu'une info bulle apparaisse sur le bouton avec un lien
j'y suis presque, mais au lieu d'apparaître au-dessus, tout le reste du tableau se décale vers la droite pour caser l'info-bulle :/
 
voilà mon code :

Code :
  1. <STYLE>
  2. .bouton_supprimer {
  3.   width:auto;
  4.   display:block;
  5.   font-weight:bold;
  6.   text-decoration:underline;
  7.   color:black;
  8.   background-color:transparent;
  9.   background-image:url('backgroundbtnsupprimer.png');
  10.   background-repeat:no-repeat;
  11.   border:none;
  12.   text-align:left;
  13.   vertical-align:middle;
  14.   padding:6px;
  15.   padding-left:28px;
  16.   padding-right:0px;
  17.   white-space:nowrap;
  18.   margin:1px;
  19.   height:26px;
  20. }
  21. span pre {
  22.   display: none;
  23. }
  24. span:hover pre {
  25.   display: inline;
  26.   position: relative;
  27.   top:0em;
  28.   left:0em;
  29.   z-index: 20;
  30.   background: #446D87;
  31.   color: #fff;
  32.   border:1px solid #000;
  33.   text-align:center;
  34.   font-weight:bold;
  35.   font-family:Verdana;
  36.   font-size: 11px;
  37.   padding:2px 4px;
  38. }
  39. </STYLE>
  41. <table border=1><tr>
  42.    <td>texte de la case précédente</td>
  43.    <td><span class="bouton_supprimer"><pre>Supprimer</pre></span></td>
  44.    <td>texte de la case suivante</td>
  45. </tr></table>


 
et la page est visible ici : http://carcreff.free.fr/soft/CSS.html
 
 
si qqun pouvait me donner une piste :jap:
 
 
edit: je viens de constater un autre problème d'importance : ça ne fonctionne pas sur internet explorer :/
(et en plus la transparence de l'image ne marche pas non plus  :ouch: )


Message édité par sire de Botcor le 28-06-2007 à 16:30:13

---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 28-06-2007 à 11:48:34   

Reply

Marsh Posté le 28-06-2007 à 12:05:27    

Salut,
 
J'ai testé ca :

Code :
  1. span:hover pre {
  2.   display: inline;
  3.   position: absolute;
  4.   z-index: 20;
  5.   background: #446D87;
  6.   color: #fff;
  7.   border:1px solid #000;
  8.   text-align:center;
  9.   font-weight:bold;
  10.   font-family:Verdana;
  11.   font-size: 11px;
  12.   padding:2px 4px;
  13. }


 
Ca fonctionne sous FF mais j'ai pas testé sous IE

Message cité 1 fois

---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 28-06-2007 à 12:13:53    

AlphaZone a écrit :

Salut,
 
J'ai testé ca :

Code :
  1. span:hover pre {
  2.   display: inline;
  3.   position: absolute;
  4. }


 
Ca fonctionne sous FF mais j'ai pas testé sous IE


Euh, ça fonctionne, ça, chez toi ?
Chez moi, sous FF, ça me mets l'info-bulle en haut à droite de la page :(  
 
je pourrais le décaler avec le top et left pour le placer mieux
mais tous les autres info-bulles de la page se placeraient au même endroit :/
 
 
 
edit : arf, j'avais pas vu que tu avais viré les top et left !
ça marche en effet sous FF [:spikler]  
 
par contre ça ne marche pas du tout avec IE  :sweat:  


Message édité par sire de Botcor le 28-06-2007 à 12:19:21

---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 28-06-2007 à 12:47:53    

Ca te fais quoi sous IE ?

Message cité 1 fois

---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 28-06-2007 à 12:53:47    

L'élément <pre> servant à préserver le formattage du texte qu'il contient (espaces, tabulations et sauts à la ligne),  je ne vois pas l'intéret de l'utiliser dans ton cas.  De plus c'est un élément de type bloc,  donc,  il est suivi d'un saut à la ligne,  comme le <div>. Le mettre dans un <span> n'y changera rien.

Message cité 1 fois
Reply

Marsh Posté le 28-06-2007 à 13:10:40    

Un type bloc ne veut pas dire qu'il y a un saut de ligne. Je crois qu'il ne faudrait pas mettre tout dans le même panier. Mais j'ai compris ce que tu as voulu dire ;)


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 28-06-2007 à 13:16:16    

C'est bien  :)
 


Message édité par bignose le 28-06-2007 à 13:17:11
Reply

Marsh Posté le 28-06-2007 à 13:52:47    

bignose a écrit :

L'élément <pre> servant à préserver le formattage du texte qu'il contient (espaces, tabulations et sauts à la ligne),  je ne vois pas l'intéret de l'utiliser dans ton cas.  De plus c'est un élément de type bloc,  donc,  il est suivi d'un saut à la ligne,  comme le <div>. Le mettre dans un <span> n'y changera rien.


je viens d'essayer en mettant <div> ou même <span> à la place de <pre> : même résultat, ça marche sous FF pas sous IE :/


---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 28-06-2007 à 16:29:53    

AlphaZone a écrit :

Ca te fais quoi sous IE ?


absolument rien, il ne réagit pas au passage du curseur :cry:
 
quelqu'un aurait une idée ?


---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 28-06-2007 à 16:34:11    

Je pense que pour commencer, tu devrais remplacer le display: inline; par block de ton pre et remplacer le pre par un div.

Message cité 1 fois
Message édité par AlphaZone le 28-06-2007 à 16:34:29

---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 28-06-2007 à 16:34:11   

Reply

Marsh Posté le 28-06-2007 à 16:43:23    

AlphaZone a écrit :

Je pense que pour commencer, tu devrais remplacer le display: inline; par block de ton pre et remplacer le pre par un div.


je viens d'essayer ça : même problème :/


---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 28-06-2007 à 18:16:56    

:hello: !
 
Je pense que le problème est que IE ne réagit pas à la propriété hover si celle-ci apparaît ailleurs que dans une balise <a> :/
 
J'ai trouvé ce site expliquant le problème.
 
 :jap:

Message cité 1 fois
Reply

Marsh Posté le 29-06-2007 à 10:34:08    

Soileh a écrit :

:hello: !
 
Je pense que le problème est que IE ne réagit pas à la propriété hover si celle-ci apparaît ailleurs que dans une balise <a> :/
 
J'ai trouvé ce site expliquant le problème.
 
 :jap:


apparemment, c'est bien ça :sweat:  
(qui est-ce qui m'a fait un navigateur pareil :fou: )
 
qu'est-ce que j'ai comme solution finalement pour faire une info-bulle visible sur internet explorer ?


---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 29-06-2007 à 11:02:42    

JavaScript


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 29-06-2007 à 12:55:01    

Tu veux mettre quoi dans ton infobulle ?

Message cité 1 fois
Reply

Marsh Posté le 29-06-2007 à 12:57:54    

Il veut mettre un lien pour exécuter une action

Message cité 1 fois

---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 29-06-2007 à 13:10:10    

AlphaZone a écrit :

Il veut mettre un lien pour exécuter une action


non non pas spécialement
 

bignose a écrit :

Tu veux mettre quoi dans ton infobulle ?


seulement expliquer ce que fait le bouton pour la première fois qu'ils le verront (qq mots, souvent 1 seul)
ça économisera de la place par rapport à un texte écrit à côté en permanence...


Message édité par sire de Botcor le 29-06-2007 à 13:14:47

---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 29-06-2007 à 13:14:13    

Bref c'est juste du texte.
 
Alors :
<td><span class="bouton_supprimer"  title="mon texte d'aide">Supprimer</span></td>
 
devrait le faire,  je pense.

Message cité 1 fois
Reply

Marsh Posté le 29-06-2007 à 13:17:18    

bignose a écrit :

Bref c'est juste du texte.
 
Alors :
<td><span class="bouton_supprimer"  title="mon texte d'aide">Supprimer</span></td>
 
devrait le faire,  je pense.


euh... oui ça marche :ouch:  
[:spikler]  :ouch:


---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 29-06-2007 à 14:14:05    

IE 6 ne gère pas hover (à part sur les <a> ), je confirme. Tu peux utiliser sinon la lib overlib

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed