Mauvais affichage d'un div

[BLJ.CHAUVIN]

Bonjour à tous les développeux!

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.


Voici mon code HTML:

Code html :

1
2
3
4
<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:

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.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!

[Muchos]

Juste quelques remarques (j'espère que ça aidera) :

1. Si l'explication de texte est courte, vous pouvez utiliser la balise html <abbr>, conçue pour ça (<abbr title="toto">vivamus</abbr>).
2. Le retour chariot et le mauvais placement sont normaux puisque le <div> — qui est un bloc — prend sa place dans le flux. Ça s'arrangerait peut-être si le <div> était à l'intérieur du <span> ? Et/Ou avec la commande css float: sur le <div> ?…
3. Une dernière chose : à quoi sert le id="Vivamus" ?

[BLJ.CHAUVIN]

Alors vous aussi vous séchez? Ca me rassure un peu alors.

EDIT : a la seconde où j'envoie cette petite pique j'obtiens une réponse, donc toutes mes excuses!

Le id="Vivamus" me sert pour le javascript en fait , aucunement pour le CSS.

Pour le float j'ai déjà essayé sans succès. Et le div dans le span... il faut que je teste ça. Je vais tenté dans la journée si possible sinon ça sera ce soir.

En tout cas merci pour ta réponse.

[Emyleen]

J'ai modifié ton code pour essayer d'adapter la div comme tu le souhaites.

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.lienTexteLatent {
	color: #138000;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    position: relative;
    text-decoration: none;
}
.lienTexteLatent:hover {
	font-weight:bold;
	text-decoration:underline;
	color:#138000;
	cursor:pointer;
}
.blockTexteLatent {
	background-color: #F0F0F0;
    border: 2px solid #FF0000;
    display: block;
    height: 300px;
    overflow-y: auto;
    position: absolute;
    top: 20px;
    width: 400px;
    z-index: 99;
}
#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;	
}

Code html :

1
2
3
4
5
6
7
8
<div id="centre">
        <p style="text-align:justify;">
        	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
            <span class="lienTexteLatent" onClick="afficherTexteLatent()">Vivamus<span id="Vivamus" class="blockTexteLatent">toto</span></span> 
        	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p style="text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

Malheureusement je ne comprend pas pourquoi la div "Vivamus" est coupée lorsque le texte est trop à droite :s
En espérant t'avoir aidé