Journal du Net > Développeurs > Contributions > Votre astuce CSS ?
Contribution précédente Contribution suivante

APPEL
A CONTRIBUTION

Vous manipulez le langage CSS au quotidien pour concevoir des pages Web ? Vous avez certainement une astuce à partager ! Cet espace est pour vous.
Dossier Rubrique Client Web
Participez

 Infos bulle en CSS  

Mathieu

Quel est en 3 lignes l'objectif de votre astuce ?

Elle permet de faire apparaître des infos bulles (intégrant du texte et des images) dans vos pages Web.

Décrivez votre astuce en détail. N'hésitez-pas à inclure des portions de codes.


Le code CSS:

a.info{
position:
relative;
z-index:
1;
background-color:#DDFFD0;
}
a.info:hover{
cursor:
help;
z-index:
2;
background-color:#FFFFBB;
}
a.info
span{bulle.gif
display:
none;
font-size:
11px;
width:
239px;
padding: 20px 4px 2px
4px;
}
a.info:hover
span{
display:block;
position:absolute;
z-index:
100;
top:
18px;
left:
-245px;
background-image:url(bul.gif);
background-repeat:
no-repeat;
background-position: center
top;
color:
#FFFF00;
text-align:
justify;
}
 
Le code dans votre page:
<a class="info" href="#"> le
mot ou texte à survoler <span> le texte de la bulle
</span></a>

Publié le 27 janvier 2009

Ojal
Bizarre, je n'arrive pas à faire marcher votre CSS ?
Contribution précédente Contribution suivante
20 contributions : 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 20
 




 

RECHERCHE