explication d'un css pour créé une infobulle

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

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





Lixyr
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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 le 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
****

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





Lixyr
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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 le 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
****

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

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





Lixyr
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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


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