Bonjour,
je cherche la posibilité de donner une définition d'un mot. J'ai essayé avec l'acronym et la propriété hover de a, mais il coupe ma définition à la moitié. Comment pourrais-je contourner cette limite en XHTML/CSS (pas de JS) ? Il faudrait surement que je crée une class definition pour faire aparaitre le texte en dessous, mais je ne vois pas comment je pourrais faire pour afficher/cacher en fonction du :hover (propriété du lien uniquement à ma connaissance).
Merci d'avance
Pierrick
Version complète: sur le forum Webmaster Hub : Définition d'un mot en une phrase
Peut être un
Avec en css:
Strictement pas sémantique (vive les liste de définitions) et pas encore testé.
CODE
<a href="">Terme <span>Définition</span></a>
Avec en css:
CODE
a
{
overflow:hidden;
}
a span
{
display:block;
text-indent:-2000em;
}
a:hover span
{
text-indent:0;
}
{
overflow:hidden;
}
a span
{
display:block;
text-indent:-2000em;
}
a:hover span
{
text-indent:0;
}
Strictement pas sémantique (vive les liste de définitions) et pas encore testé.
Bonjour,
Dans le même style, testé IE et FF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Test</title>
<style type="text/css">
a.bulle {
text-decoration: none;
color: red;
position: relative;
}
a.bulle span {
display: none;
}
a.bulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.bulle:hover span {
color: green;
position: absolute;
left: 10px;
top: 20px;
background: yellow;
width: 300px;
display:inline;
}
</style>
</head>
<body>
<p >
<a class="bulle" href="#"> <span> je suis la définition du mot ...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi egestas pede ac quam. Etiam lectus elit, vehicula et, ornare in, gravida a, urna. Donec vel ipsum in pede adipiscing scelerisque. Mauris nunc magna, iaculis non, mattis in, commodo at, nibh. Duis ultricies aliquam urna. Duis luctus lorem id est.</span> mot</a>
</p>
</body>
</html>
Si ça peut t'aider.
Dans le même style, testé IE et FF
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Test</title>
<style type="text/css">
a.bulle {
text-decoration: none;
color: red;
position: relative;
}
a.bulle span {
display: none;
}
a.bulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.bulle:hover span {
color: green;
position: absolute;
left: 10px;
top: 20px;
background: yellow;
width: 300px;
display:inline;
}
</style>
</head>
<body>
<p >
<a class="bulle" href="#"> <span> je suis la définition du mot ...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi egestas pede ac quam. Etiam lectus elit, vehicula et, ornare in, gravida a, urna. Donec vel ipsum in pede adipiscing scelerisque. Mauris nunc magna, iaculis non, mattis in, commodo at, nibh. Duis ultricies aliquam urna. Duis luctus lorem id est.</span> mot</a>
</p>
</body>
</html>
Si ça peut t'aider.
Merci pour vos réponses 
Je testerai dès que j'aurai un peu de temps à moi, je vous tiens au jus
Je testerai dès que j'aurai un peu de temps à moi, je vous tiens au jus
Impeccable 
Encore merci
Encore merci
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.