salut,
Je suis nouveau sur ce forum et je commence juste à comprendre légèrement CSS donc soyez indulgents..
Voila, en cherchant un peu partout j'ai réussi à comprendre comment faire une info bulle (tooltip). Je souhaiterais lui mettre une ombre et voila le code que j'ai pondu (en pompant un peu partout ) dans les définitions CSS
Et je l'apelle dans le code HTMLen faisant :
Donc l'idée c'est le premier a.info.Hover me fait l'infobulle proprement dite et le second me fait l'ombre en bas... (avec une image que je repète).
Mais comment (je ne vais pas ajoutter un second .hover... ??) ajouter l'ombre pour la droite (ombreD) et l'ombre pour le coinBD ?
Très clairement ma connaissance (plus que faible) du CSS dois me faire passer à côté d'un truc simple...
voila si vous avez une suggestion, je suis preneur..
Merci
NB : je sais que je pourais définir une image carré avec les ombre bas et droite que je ferais dépaser de quelques pix, mais j'aimerais comprendre ce que dans ma proposition je ne comprends pas...
Modifié par benou (08 Feb 2008 - 11:46)
Je suis nouveau sur ce forum et je commence juste à comprendre légèrement CSS donc soyez indulgents..
Voila, en cherchant un peu partout j'ai réussi à comprendre comment faire une info bulle (tooltip). Je souhaiterais lui mettre une ombre et voila le code que j'ai pondu (en pompant un peu partout ) dans les définitions CSS
a.info em {
display:none;
}
a.info:hover {
border: 0;
position: relative;
z-index: 500;
text-decoration:none;
cursor:help;
}
a.info:hover em {
font-style: normal;
display: block;
position: absolute;
top: 20px;
left: -10px;
padding: 5px;
color: #000;
border: 1px solid #FF6600;
background: #ffc;
width:170px;
}
a.info:hover em span {
position: absolute;
top: 100%;
left: 2px;
height: 13px;
width:100%;
background: transparent url(http:xxxxx/ombreB.png) repeat;
margin:0;
padding: 0;
border: 0;
}
Et je l'apelle dans le code HTMLen faisant :
<a class="info" href="javascript:void(0)"> xxxxxx <em><span style="font-size:0;"></span> le texte de l'infobulle</em></a>
Donc l'idée c'est le premier a.info.Hover me fait l'infobulle proprement dite et le second me fait l'ombre en bas... (avec une image que je repète).
Mais comment (je ne vais pas ajoutter un second .hover... ??) ajouter l'ombre pour la droite (ombreD) et l'ombre pour le coinBD ?
Très clairement ma connaissance (plus que faible) du CSS dois me faire passer à côté d'un truc simple...
voila si vous avez une suggestion, je suis preneur..
Merci
NB : je sais que je pourais définir une image carré avec les ombre bas et droite que je ferais dépaser de quelques pix, mais j'aimerais comprendre ce que dans ma proposition je ne comprends pas...
Modifié par benou (08 Feb 2008 - 11:46)