| [résolu] Problème d'infobulle | |
|
Panda Hyperactif
{ Membre }
Messages : 14
| Coucou, Tout d'abord je tiens à préciser que j'ai fait des recherches concernant mon problème mais que je n'ai rien trouvé qui pourrait m'aider à la faire fonctionner. Avant, et sûrement comme beaucoup de gens, je faisais les infobulles grâce au système de Lilypad et des - Code:
-
<a> ... Mais j'ai essayé de passer aux - Code:
-
<div> comme expliqué à pas mal d'endroits, et je n'comprends absolument pas pourquoi mon infobulle continue de ne pas fonctionner ;w; Je vous donne les codes qui sont ceux de base que j'ai à peine changés... - Code:
-
.infobulle { position:relative; /* on définit le bloc comme référent */ }
.infobulle > div { display: none; /* infobulle cachée par défaut */ }
.infobulle:hover { background: none; /* correction d'un bug IE */ }
/* au survol du bloc, on fait apparaitre la 'bulle' */ .infobulle:hover > div { display: block; /* on fait apparaitre l'infobulle (on peut mettre inline aussi si besoin) */
position: absolute; /* on va la positionner */ top:0px; /* de 0 pixels par rapport au haut de l'élément survolé */ left: 50px; /* de 50px par rapport au côté gauche de l'élément survolé */ z-index:25; /* on met l'élément au dessus du reste */
/* et après on peut mettre les propriétés de taille, couleur, forme, etc de l'infobulle */ width:200px; border-radius:25px; padding:10px; } et le code html : - Code:
-
<div class="infobulle">texte<div> CONTENU QUI APPARAIT AU SURVOL </div> </div> J'précise également que je mets ce code (html) dans un message (donc un nouveau post) et le code css dans ma feuille de style. Merci d'avance o/ |
Dernière édition par Panda Hyperactif le Mer 29 Aoû 2012, 17:06, édité 1 fois | |
|
| |
Hiro
Ninja Codeur
Messages : 1179
| Cela fonctionne très bien chez moi, peut tu me fournir un lien vers le problème en question ? | | |
|
| |
Faucon
{ Membre hyper-actif }
Messages : 1757
| Salut
Pour moi aussi il marche, je crois que cela doit être la feuille CSS qui pose problème. Donc pourrais-tu nous passer toute ta feuille ?
Merci | | |
|
| |
Panda Hyperactif
{ Membre }
Messages : 14
| Recoucou, En fait j'ai trouvé (enfin, du moins, mon code fonctionne à présent ;w;) J'avais mis des ---------------------- dans ma feuille de style pour séparer mes différents éléments (genre templates, page d'accueil, catégories, etc.) et après les avoir enlevés, ça refonctionne ;w; Pourtant je n'pense pas que ça joue ? Enfin, je sais pas ;_; Si quelqu'un voudrait bien me dire pourquoi ça ne fonctionnait pas avec des ---- et s'il y a quelque chose pour remplacer histoire que mon code soit "propre" xD, mon problème pourra être considéré comme résolu Merci en tout cas | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Bonjour, Tout simplement parce que "----------------" n'a aucun sens en CSS. Si tu veux mettre des séparations, tu dois les mettre ENTRE COMMENTAIRES CSS, c'est à dire entre /* et */, comme ceci : - Code:
-
.UneClasse {
}
/* ---------------------------------- */
.UneAutreClasse {
} Autrement, le CSS sera interprété n'importe quoi, voire pas du tout. C'est exactement pareil que si tu te mettais à hurler "BICYCLETTE A MAZOUT !!" au milieu d'une conversation qui n'a rien à voir. Personne n'y comprendrait rien x) | | |
|
| |
Panda Hyperactif
{ Membre }
Messages : 14
| Hn ok ;w; Ben merci beaucoup en tout cas et désolée pour le dérangement qui finalement était un peu pour rien T^T
Edit : comment je fais pour mettre "résolu"? ;______;" | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Tu édites le nom de ton sujet et tu rajoutes [résolu] dedans ? @_@ (Sinon en dessous de la fenêtre d'édition du message dans les options il y a un bouton pour ça) | | |
|
| |
Panda Hyperactif
{ Membre }
Messages : 14
| .....Ah mais j'suis vraiment stupide, pardon Ben merci, en tout cas | | |
|
| |
pamina
{ Membre actif }
Messages : 1170
| Hello Panda, Merci d'avoir signalé que ton sujet est résolu. A bientôt ! Je classe. | | |
|
| |
Contenu sponsorisé
| |
| |
| [résolu] Problème d'infobulle | |
|