L'infobulle

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

  • 0

Résolu L'infobulle

Message par Hemma le Lun 25 Avr 2011 - 14:29

Bonjour/soir j'ai lu tout les tutos sur les infobulles mais je n'arrive pas à en mettre sur mon forum.Car moi ça me mets un fond horrible et un cadre bleu trop moche.

Merci d'avance


Dernière édition par Hemma le Mer 4 Mai 2011 - 17:37, édité 2 fois

Hemma
**

Féminin
Messages : 61
Inscrit(e) le : 25/11/2010

http://Fashion-Graph-World.forumgratuit.org
Hemma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: L'infobulle

Message par Alyz le Lun 25 Avr 2011 - 15:02

Salut,

Peux-tu nous passer les codes utilisés (HTML et CSS), s'il te plaît ?

Alyz
****

Féminin
Messages : 290
Inscrit(e) le : 09/06/2010

http://r24.imgfast.net/users/2913/10/00/00/smiles/849849.gif
Alyz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: L'infobulle

Message par Hemma le Mer 27 Avr 2011 - 18:28

Code HTML:
Code:
<div class="infobulle"><img src="http://i24.servimg.com/u/f24/16/34/33/34/k-on_y14.png">
<span>[url=http://fashion-graph-world.forumgratuit.org/profile?mode=editprofile/]Profil[/url][*][url=http://fashion-graph-world.forumgratuit.org/privmsg?mode=post&u=1/]Envoyer un mp[/url]</span></div>

Le 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;}

Hemma
**

Féminin
Messages : 61
Inscrit(e) le : 25/11/2010

http://Fashion-Graph-World.forumgratuit.org
Hemma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: L'infobulle

Message par Alyz le Jeu 28 Avr 2011 - 14:40

Spoiler:
.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;
}

Ce qui est souligné est le code à changer pour que la couleur de fond soit différente et ce qui est en gras est pour la couleur du contour. Si tu ne veux pas qu'il y ait de contour, supprime "border: 2px solid #0000FF;" (mais fais attention à ne pas supprimer le } )

Ces codes que tu dois changer sont des codes hexadécimaux. Voici un site qui te permettra de voir le code correspondant à la couleur que tu veux : http://www.code-couleur.net/selection-couleur.php

Alyz
****

Féminin
Messages : 290
Inscrit(e) le : 09/06/2010

http://r24.imgfast.net/users/2913/10/00/00/smiles/849849.gif
Alyz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: L'infobulle

Message par Hemma le Ven 29 Avr 2011 - 16:40

Merci

Hemma
**

Féminin
Messages : 61
Inscrit(e) le : 25/11/2010

http://Fashion-Graph-World.forumgratuit.org
Hemma 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