explication d'un css pour créé une infobulle

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu explication d'un css pour créé une infobulle

Message par Lunathiel Ven 28 Jan 2011 - 18:13

Bonsoir^^

En cherchant sur ce forum je suis tombée sur ce que je cherchais à savoir, comment créer une infobulle

hors pour la créer nous avons ce css

Code:

.infobulle{
position: relative;
z-index: 0;}

.infobulle:hover{
background-color: transparent;
z-index: 50;}

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{
border: 2px;
padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}

Quelqu'un pourrait-il m'expliquer les différentes partie de ce css afin que je puisse le modifié pour arriver à créer ce que je veux, sachant que l'image d'où s'affiche l'infobulle est à droite et que j'aimerais que l'infobulle arrive sur la gauche de cette image, et aussi changer la taille de l'infobulle. Un tout grand merci


Dernière édition par Lunathiel le Dim 30 Jan 2011 - 14:14, édité 1 fois
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: explication d'un css pour créé une infobulle

Message par Lixyr Ven 28 Jan 2011 - 18:44

Re bonjour Luna.

Alors pour changer tout ça il me semble que c'est dans cette partie :

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}

1 - Pour que le contenu apparaisse à gauche et non pas à droite tu dois modifier cette valeur :
left: 35px;
Plus le contenu est élevé et plus le message s'éloigne de la gauche.
Mets un chiffre avec un - devant et ça devrait se mettre à gauche.

2 - pour la taille tu dois changer cette valeur :
width: 200px ;
Ca c'est la largeur de l'infobulle.
Tu peux aussi modifier la hauteur avec ce code :
height:50px;


Voilà, pour le reste je te conseille de ne pas y toucher xD


Pour faciliter les recherches, mettez un titre explicite.
Remerciez explication d'un css pour créé une infobulle 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu explication d'un css pour créé une infobulle 3592387030 pour prévenir la modération.

explication d'un css pour créé une infobulle Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: explication d'un css pour créé une infobulle

Message par Lunathiel Sam 29 Jan 2011 - 11:34

; )

un grand merci je vais tester de mon côté. Je ne ferme pas tout de suite ce sujet au cas où j'aurais encore besoin d'aide sinon je viendrais prévenir et le fermé

Un immmmmmmense merci


PS: lixyr Yrna je te dois beaucoup!!! Un grand grand merci à toi je ne te le dirais jamais assez
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: explication d'un css pour créé une infobulle

Message par Lixyr Sam 29 Jan 2011 - 13:45

J'ai l'habitude d'aider les mêmes personnes. Mais je t'en prie je suis là pour ça. ^^ C'est résolu alors ?


Pour faciliter les recherches, mettez un titre explicite.
Remerciez explication d'un css pour créé une infobulle 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu explication d'un css pour créé une infobulle 3592387030 pour prévenir la modération.

explication d'un css pour créé une infobulle Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: explication d'un css pour créé une infobulle

Message par Lunathiel Sam 29 Jan 2011 - 14:13

J'ai juste un dernier petit problème =/

L'infobulle ne s'active pas qu'au passage sur l'image mais sur toute la bande de catégorie... Pour mieux comprendre jette un oeil ici =>


Passe ta souris sur la catégorie "votre pseudo"
il s'affiche au passage sur toute la catégorie et pas seulement sur l'image comme je voudrais le faire...

(la couleur ne correspond pas mais c'est normal ce n'est pas pour ce forum que je le crée^^ ce forum est a l'abandon et je m'en sert comme forum test^^ PS: il est quand même à moi ce forum)


Dernière édition par Lunathiel le Dim 30 Jan 2011 - 14:14, édité 1 fois
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: explication d'un css pour créé une infobulle

Message par Lunathiel Dim 30 Jan 2011 - 10:28

Un petit up pour un petit coup de main?

Edit^^ Grâce à un ami IRL j'y suis arrivée!!!!!! On peut donc clôturer ceci =3

Merci merci merci merci

:thanks:
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: explication d'un css pour créé une infobulle

Message par Lixyr Dim 30 Jan 2011 - 19:43

Han désolée j'avais pas vu la réponse. silent

Enfin ça va si c'est résolu, je t'en prie ! A la prochaine cheers


Pour faciliter les recherches, mettez un titre explicite.
Remerciez explication d'un css pour créé une infobulle 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu explication d'un css pour créé une infobulle 3592387030 pour prévenir la modération.

explication d'un css pour créé une infobulle Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum