28173 sujets

CSS et mise en forme, CSS3

salut,
Je suis nouveau sur ce forum et je commence juste à comprendre légèrement CSS donc soyez indulgents.. Smiley cligne

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 Smiley langue ) 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)
salut et merci..

C'est en effet la solution la plus simple (même si l'info bulle aura une hauteur variable en fonction du texte inclus) mais disons que, plus que le fait que cela se fasse, j'aimerais comprendre le pourquoi du comment..

Smiley lol