Bonjour à tous les kiwis!
Je me tourne vers vous car je suis confronté à un soucis d'affichage avec un div récalcitrant. Voilà mon problème:
J'ai un contenu textuel lambda, des paragraphes (<p>) de blabla sans rien de particulier. Mais pour certains mots particuliers (je les appellerais les mots déclencheurs) je souhaiterai laisser le choix à l'utilisateur d'afficher ou pas une explication de texte. Un genre de définition quoi.
Quand l'utilisateur clique sur l'un des mots déclencheurs en question (ils sont de couleur verte et quand on passe la souris dessus ils sont soulignés et le curseur passe en pointer) un div qui était caché apparait sous le mot en question. Ce div s'affiche au-dessus du reste du texte, ainsi la hauteur de ma page ne change pas. C'est ce div qui contient l'explication de texte.
Le problème que je rencontre est double:
1° - Quand le div caché s'affiche il entraine un retour chariot, donc après mon mot déclencheur j'ai une saut de ligne. Au début de la ligne suivante j'ai le reste de mon paragraphe et le div caché par dessus.
2° - Mon div ne se positionne pas correctement. Il se place au début de la ligne suivante alors que je le voudrais sous mon mot déclencheur (ou au pire juste derrière).
J'ai fais une capture d'écran pour illustrer mon explication.
screenshot d'exemple
Voici mon code HTML:
Et mon code CSS:
Voyez vous ce qui peut m'enlever le saut de ligne après mon div, et mieux le positionner?
Merci pour votre attention et bon dimanche!
Modifié par LordBatoon (18 Dec 2011 - 16:38)
Je me tourne vers vous car je suis confronté à un soucis d'affichage avec un div récalcitrant. Voilà mon problème:
J'ai un contenu textuel lambda, des paragraphes (<p>) de blabla sans rien de particulier. Mais pour certains mots particuliers (je les appellerais les mots déclencheurs) je souhaiterai laisser le choix à l'utilisateur d'afficher ou pas une explication de texte. Un genre de définition quoi.
Quand l'utilisateur clique sur l'un des mots déclencheurs en question (ils sont de couleur verte et quand on passe la souris dessus ils sont soulignés et le curseur passe en pointer) un div qui était caché apparait sous le mot en question. Ce div s'affiche au-dessus du reste du texte, ainsi la hauteur de ma page ne change pas. C'est ce div qui contient l'explication de texte.
Le problème que je rencontre est double:
1° - Quand le div caché s'affiche il entraine un retour chariot, donc après mon mot déclencheur j'ai une saut de ligne. Au début de la ligne suivante j'ai le reste de mon paragraphe et le div caché par dessus.
2° - Mon div ne se positionne pas correctement. Il se place au début de la ligne suivante alors que je le voudrais sous mon mot déclencheur (ou au pire juste derrière).
J'ai fais une capture d'écran pour illustrer mon explication.
screenshot d'exemple
Voici mon code HTML:
<div id="centre">
<p style="text-align:justify;">Lorem ipsum dolor sit amet ...... eleifend vel quam. <span class="lienTexteLatent" onClick="afficherTexteLatent()">Vivamus</span><div id="Vivamus" class="blockTexteLatent">toto</div> suscipit iaculis euismod. Phasellus ....</p>
<p style="text-align:justify;">Morbi euismod rutrum elit ... porta eget tortor.</p></div>Et mon code CSS:
.lienTexteLatent {
font-weight:bold;
text-decoration:none;
color:#138000;
cursor:pointer;
}
.lienTexteLatent:hover {
font-weight:bold;
text-decoration:underline;
color:#138000;
cursor:pointer;
}
.blockTexteLatent {
width:400px;
height:300px;
overflow-y:hidden;
overflow-y:auto;
background-color:#F00;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
border:2px solid #ffffff;
display:inline;
position:absolute;
}
#centre {
width:955px;
margin:15px 15px 15px 210px;
height:600px;
overflow-x:hidden;
overflow-y:auto;
scrollbar-shadow-color: #797979;
scrollbar-highlight-color: #D7D7D7;
scrollbar-3dlight-color: #D7D7D7;
scrollbar-darkshadow-color: #E2E2E2;
scrollbar-track-color:#E2E2E2;
scrollbar-arrow-color: #456FAB;
scrollbar-base-color: #CCCCCC;
display:block;
}
Voyez vous ce qui peut m'enlever le saut de ligne après mon div, et mieux le positionner?
Merci pour votre attention et bon dimanche!
Modifié par LordBatoon (18 Dec 2011 - 16:38)
