Bonjour a tous !
Voila mon probleme. J'ai un texte qui contient des infobulles (trouvés sur ce site) dans des ancres.
On m'a demandé de limité la hauteur de ce texte, avec un lien pour voir le texte en entier si besoin. Pour limiter la hauteur du texte, j'ai pensé au style overflow:hidden sur mon div, mais du coup, les définitions en infobulles qui dépassent le cadre du div passent "en dessous" du div plutot que par dessus. J'ai essayé plusieurs modifs, notamment au niveau des z-index et des position:absolute et relative, mais rien a faire... Je me tourne donc vers vous !
Voila un code permettant de se faire une idée du probleme :
Bien sur, le div avec overflow n'est pas obligatoire, si vous avez d'autres moyens d'arriver au meme résultat, je suis preneur
Merci d'avance !
Silent Bob
Voila mon probleme. J'ai un texte qui contient des infobulles (trouvés sur ce site) dans des ancres.
On m'a demandé de limité la hauteur de ce texte, avec un lien pour voir le texte en entier si besoin. Pour limiter la hauteur du texte, j'ai pensé au style overflow:hidden sur mon div, mais du coup, les définitions en infobulles qui dépassent le cadre du div passent "en dessous" du div plutot que par dessus. J'ai essayé plusieurs modifs, notamment au niveau des z-index et des position:absolute et relative, mais rien a faire... Je me tourne donc vers vous !
Voila un code permettant de se faire une idée du probleme :
<html>
<head>
<title>Untitled</title>
<style>
a.infobulle{
cursor: help;
position:relative;
z-index:24;
text-decoration:none;
margin-bottom:0px;
color:#000;
border-bottom:1px dotted #993300;
}
a.infobulle:hover{
z-index:25;
background-color:#FEFF73!important;
color:#000!important;
font-weight:normal!important;
text-decoration:none;
border-bottom-style:none;
}
a.infobulle span{display:none}
a.infobulle:hover span{
font-size:11px;
display:block;
padding:2px;
position:absolute;
top:2em;
left:-2em;
width:20em;
border:1px solid #a2a2a2;
background-color:#f2f2f2;
color:#000;
text-align:justify;
text-decoration:none;
}
</style>
</head>
<body>
<div style="height:200px;width:400px;overflow:hidden;border:1px solid red;z-index:1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra nibh eu metus. Mauris sapien velit, euismod nec, convallis sit amet, pulvinar id, risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce bibendum sapien congue odio. Nullam faucibus. Morbi justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam ac nunc. Aenean quis purus. Praesent pellentesque, justo et feugiat ullamcorper, eros eros sollicitudin purus, at eleifend augue risus ut quam. <a href="#" class="infobulle">Proin sed dolor<span>Morbi porta laoreet nisi. Cras varius sagittis dolor. Nunc feugiat purus non magna. Mauris a augue vitae neque feugiat volutpat. Mauris orci nisi, congue vitae, sodales ut, dignissim at, pede. Proin mollis. Fusce faucibus orci egestas leo. Morbi eu mauris facilisis pede dapibus cursus. Aliquam mi enim, pretium non, pellentesque vel, blandit ut, elit. Ut turpis felis, hendrerit ac, pharetra sed, iaculis non, odio. Morbi congue. Morbi placerat, sapien sit amet venenatis convallis, elit velit dictum erat, a interdum diam tortor vitae leo. Fusce mollis. Ut nulla est, feugiat eget, egestas ut, tempor et, pede. Proin condimentum.</span></a> ac turpis placerat pulvinar.<br>
<br>
Nam euismod tristique tortor. Donec tincidunt facilisis ligula. Sed ornare, tortor et bibendum pretium, dui elit mattis metus, et congue enim arcu ac metus. Praesent nisl arcu, iaculis nec, tempor vitae, placerat sit amet, libero. Nullam dolor libero, placerat in, pulvinar semper, blandit sit amet, eros. Nulla vel orci. Aenean at libero. Morbi eget ipsum. Vestibulum pharetra massa placerat augue. Praesent at dui vel nulla tempor consectetuer. Nullam faucibus tincidunt ipsum. Praesent aliquet dolor sit amet sapien. Praesent at pede ac erat suscipit auctor.
</div>
</body>
</html>
Bien sur, le div avec overflow n'est pas obligatoire, si vous avez d'autres moyens d'arriver au meme résultat, je suis preneur
Merci d'avance !
Silent Bob