Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3053 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1580295
sire de Bo​tcor
Armorican way of life
Posté le 28-06-2007 à 11:48:34  profilanswer
 

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
mood
Publicité
Posté le 28-06-2007 à 11:48:34  profilanswer
 

n°1580304
AlphaZone
Posté le 28-06-2007 à 12:05:27  profilanswer
 

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."
n°1580309
sire de Bo​tcor
Armorican way of life
Posté le 28-06-2007 à 12:13:53  profilanswer
 

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
n°1580327
AlphaZone
Posté le 28-06-2007 à 12:47:53  profilanswer
 

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."
n°1580332
bignose
Posté le 28-06-2007 à 12:53:47  profilanswer
 

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
n°1580340
AlphaZone
Posté le 28-06-2007 à 13:10:40  profilanswer
 

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."
n°1580343
bignose
Posté le 28-06-2007 à 13:16:16  profilanswer
 

C'est bien  :)
 


Message édité par bignose le 28-06-2007 à 13:17:11
n°1580354
sire de Bo​tcor
Armorican way of life
Posté le 28-06-2007 à 13:52:47  profilanswer
 

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
n°1580496
sire de Bo​tcor
Armorican way of life
Posté le 28-06-2007 à 16:29:53  profilanswer
 

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
n°1580500
AlphaZone
Posté le 28-06-2007 à 16:34:11  profilanswer
 

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."
mood
Publicité
Posté le 28-06-2007 à 16:34:11  profilanswer
 

n°1580508
sire de Bo​tcor
Armorican way of life
Posté le 28-06-2007 à 16:43:23  profilanswer
 

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
n°1580536
Soileh
Lurkeur professionnel
Posté le 28-06-2007 à 18:16:56  profilanswer
 

: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
n°1580676
sire de Bo​tcor
Armorican way of life
Posté le 29-06-2007 à 10:34:08  profilanswer
 

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
n°1580694
AlphaZone
Posté le 29-06-2007 à 11:02:42  profilanswer
 

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."
n°1580772
bignose
Posté le 29-06-2007 à 12:55:01  profilanswer
 

Tu veux mettre quoi dans ton infobulle ?

Message cité 1 fois
n°1580775
AlphaZone
Posté le 29-06-2007 à 12:57:54  profilanswer
 

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."
n°1580783
sire de Bo​tcor
Armorican way of life
Posté le 29-06-2007 à 13:10:10  profilanswer
 

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
n°1580787
bignose
Posté le 29-06-2007 à 13:14:13  profilanswer
 

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
n°1580788
sire de Bo​tcor
Armorican way of life
Posté le 29-06-2007 à 13:17:18  profilanswer
 

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
n°1580808
rufo
Pas me confondre avec Lycos!
Posté le 29-06-2007 à 14:14:05  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Bug XHTML/CSS[Résolu] Pb CSS : cadre qui bouge...
Recherche programmmeur CSS[HTML/CSS]Probleme de compatibilite IE7 ...
[CSS] problème disposition d'une liste de liens1 erreur de validation CSS 2.0
CSS et element text[CSS] probleme de z-index ou de positionnement
[RESOLU]-[HTML, CSS] positionnement divMenu CSS et IE6
Plus de sujets relatifs à : [CSS] Faire une info-bulle avec internet explorer...

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.092 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR