J'ai donc commencé ici : http://oli22.free.fr/presentation.html#3
J'ai mis une infobulle au mot "W3C" et donc une petite encyclopédie à sa droite. Sous FF ça passe bien mais sous IE l'image est coupée à un bord et se termine au bord opposé. Enfin essayez-vous même ça sera plus clair
Voilà mon code HTML :
Code : Tout sélectionner
<p>
<span class="lettrine">C</span>
e site est optimisé pour les navigateurs internet respectueux des standards énoncés par le
<a href="#W3C" id="W3C" class="info">W3C
<span>World Wide Web Consortium : ensemble de sociétés qui fixe les normes à respecter en créant un site web afin de rendre Internet accessible à tous.</span>
</a>
, dont ne fait pas partie Internet Explorer que 90% d'entre vous utilisent malheureusement, souvent par ignorance d'une alternative.
</p>
Code : Tout sélectionner
/*---Info bulles---*/
#article a.info {
position: relative;
z-index: 24;
padding-right: 19px;
color: #000000;
text-decoration: none;
background-image: url(images/design/dico.png);
background-position: right;
background-repeat: no-repeat;
}
#article a.info:visited {
z-index: 24;
color: #000000;
padding-right: 19px;
text-decoration: none;
background-image: url(images/design/dico.png);
background-position: right;
background-repeat: no-repeat;
}
#article a.info:hover {
z-index: 25;
color: #000000;
padding-right: 19px;
background-color: transparent;
text-decoration: none;
cursor: help;
}
#article a.info span {
display: none;
text-decoration: none;
}
#article a.info:hover span {
display:block;
position:absolute;
padding:4px;
top:2.2em;
left:-13em;
width:15em;
border:1px solid #404040;
background-color:#FFFEE0;
color:#000000;
text-align:left;
font-size:85%;
font-family:"Arial", "Microsoft Sans serif", "Sans Serif";
}
Si vous avez d'autres remarques sur mon code, je ne demande qu'à l'améliorer (je débute)
PS: J'en profite pour demander si ça ne dérange pas que je reprenne les images de ce site ?