explication d'un css pour créé une infobulle

[Lunathiel]

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

[Lixyr]

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

[Lunathiel]

; )

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

[Lixyr]

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 ?

[Lunathiel]

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)

[Lunathiel]

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:

[Lixyr]

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

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