Décalage de zone CSS

**BnA** · 13/02/2007, 15h32

Bonjour à tous!

Voici mon problème.

J'ai 4 titres, lesquels, une fois que l'on clique dessus, font apparaître du texte.

Lorsque je laisse mon code tel quel (voir plus bas), il n'y a pas de problème de positionnement, que le texte soit affiché ou pas.

Le problème, c'est qu'il faut que mes textes soient légèrement décalés par rapport au titre (décalés sur la droite). J'ai essayé avec un div, mais il y avait alors un problème avec les titres suivants (ceux-ci ne tenaient plus sur une ligne)...

Voici mes codes.

HTML (désolé pour la longueur)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
<link href="presentation.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
	margin-top: 50px;
}
-->
</style>
 
<SCRIPT LANGUAGE="Javascript">
var textspan = '';
var texthelp = '';
 
function show(span,help,title) {
 
	var textspan = span;
	var texthelp = help;
	var texttitle = document.getElementById(title).innerHTML;
 
	if(document.getElementById){
		tabler = document.getElementById("" + span + "");
		if(tabler.style.display=="none"){
			document.getElementById("" + help +"").innerHTML = '<img src="images/puce_down.png" class="txt_deroulant"><span style="font-weight:bold;" id="'+title+'">'+texttitle+'</span>';
			tabler.style.display="";
			}
			else{
			document.getElementById("" + help +"").innerHTML = '<img src="images/puce_normal.png" class="txt_deroulant"><span style="font-weight:bold;" id="'+title+'">'+texttitle+'</span>';
			tabler.style.display="none";
			}
		}
	}
</script>
 
</head>
 
<body>
<div id="container">
      <p class="title">Nos cours</p>
 
     <!-- <p><strong><a href="../PDFS/E_Learning_mode_d_emploi_p_dagogique_FR_full.pdf" target="_blank">Téléchargez ici le descriptif détaillé de nos différents cours</a> </strong></p>
	  <p style="margin-bottom: 5px"><strong><a href="../anim_Flash/fr_menu.htm" target="centerFrame">Regardez un exemple de menu</a> </strong></p>-->
 
	  <p> ELLA vous propose un <strong>contenu extrèmement riche </strong> de cours traitant de tout ce dont vous avez besoin pour progresser. Faites votre choix parmi les leçons sur les sujets de la vie de tous les jours, les débats de la vie économique et sociale, la grammaire, la prononciation, la correspondance commerciale. </p>
 
<br/>
	  <!-- 1ER INTERTITRE -->
 
	<a href="#" onClick="show('span1','lien1','titre1');return(false)" id="lien1" class="txt_deroulant"><img src="images/puce_normal.png" class="txt_deroulant"/><span style="font-weight:bold;" id="titre1"> Les modules de communication et de vocabulaire</span></a>
 
<span id="span1" style="display:none">
<br />
 
<p><strong>Les modules de communication et vocabulaire</strong> vous feront pratiquer la langue intensivement par oral et par écrit, dans des contextes de la vie quotidienne et professionnelle. </p>
 
<p>Au total, <strong>7000 mots et expressions</strong> liés à plus de <strong>80 thèmes généraux</strong> (se présenter, demander le chemin, parler de la politique, de l'environnement,) <strong>et professionnels</strong> (téléphoner, parler de son travail, lancer un nouveau produit, etc...). </p>
 
<p class="tip">Niveaux: de débutant à avancé (anglais, néerlandais); de débutant à intermédiaire moins (allemand, espagnol, français). </p>
 
<p align="right"><a href="#" onClick="show('span1','lien1', 'titre1');return(false)">Cacher ce texte</a></p>
 
</span>
<br/>  
 
 
 
<br/>
	  <!-- 2EME INTERTITRE -->
 
	<a href="#" onClick="show('span2','lien2','titre2');return(false)" id="lien2" class="txt_deroulant"><img src="images/puce_normal.png" class="txt_deroulant"/><span style="font-weight:bold;" id="titre2"> Les cours de grammaire</span></a>
 
<span id="span2" style="display:none">
<br />
 
<p><strong>Les cours de grammaire</strong> permettent à chacun d'acquérir à son niveau une pratique excellente de la grammaire. <strong>Plus de 5.000 exercices</strong> sont proposés: chaque règle est introduite progressivement, revue à plusieurs reprises et transférée dans l'ensemble de la matière étudiée. Ce canevas doit conduire à l'assimilation et à la fixation en profondeur de la grammaire dans la communication de tous les jours.</p>
 
<p class="tip">Niveaux: de débutant à avancé.</p>
 
<p align="right"><a href="#" onClick="show('span2','lien2', 'titre2');return(false)">Cacher ce texte</a></p>
</span>
<br/>  
<br/>
 
	<!-- 3ème INTERTITRE -->
<a href="#" onClick="show('span3','lien3','titre3');return(false)" id="lien3" class="txt_deroulant"><img src="images/puce_normal.png" class="txt_deroulant"/><span style="font-weight:bold;" id="titre3"> Les points de vue</span></a>
 
<span id="span3" style="display:none">
<br />
 
<p><strong>Points de vue</strong> est un cours vidéo exclusif pour apprendre à exprimer vos idées et à développer une argumentation convaincante en langue étrangère.</p>
<p>Toutes les situations d'apprentissage sont centrées sur la <strong>vie réelle</strong>. Vous entendez et apprenez les expressions utilisées quotidiennement par les locuteurs natifs pour parler de <strong>sujets concrets</strong> comme l'horaire flottant, le travail à domicile, l'importance de la politique, la problématique des statuts de travail etc. </p>
<p>Grâce à cette méthode pratique et efficace, vous pouvez apprendre rapidement ce qui vous est nécessaire. Quelques cours d'activation orale avec votre professeur et vos progrès seront remarquables.</p>
 
<p class="tip">Niveaux: d'intermédiaire à avancé. </p>
 
<p align="right"><a href="#" onClick="show('span3','lien3', 'titre3');return(false)">Cacher ce texte</a></p>
</span>
<br/>  
<br/>
 
<!-- 4ème INTERTITRE -->
 
 
<a href="#" onClick="show('span4','lien4','titre4');return(false)" id="lien4" class="txt_deroulant"><img src="images/puce_normal.png" class="txt_deroulant"/><span style="font-weight:bold;" id="titre4"> Langue des affaires</span></a>
 
<span id="span4" style="display:none">
<br />
 
<p><strong>Les cours de langue des affaires</strong> sont disponibles en allemand, anglais, espagnol, français et néerlandais.</p>
 
<p><strong>Ils comprennent:</strong></p>
 
<p>Un <strong>cours axé sur le langage des réunions et négociations</strong>: l'accent est clairement mis sur l'acquisition et l'automatisation de <strong>300 phrases-clés</strong> nécessaires pour bien communiquer dans les réunions et négociations ainsi que sur l'amélioration de la <strong>compréhension à l'audition.</strong></p>
 
<p class="tip">Niveaux: d'intermédiaire à avancé.</p>
 
<p>Des <strong>cours vidéos</strong> donnés par des spécialistes parlant leur langue maternelle et traitant de <strong>sujets spécialisés de la vie des entreprises</strong>: franchising, import-export, gestion des ressources humaines, marketing etc. L'objectif est d'apprendre la langue à partir d'un contenu particulièrement adapté.</p>
 
<p class="tip">Niveaux: d'intermédiaire à avancé.</p>
 
<p>La <strong>correspondance</strong> commerciale: répondre à une demande de renseignements, faire un rappel de paiement, réserver des infrastructures hôtelières, solliciter un emploi, etc. en allemand, anglais, français ou néerlandais, tout ceci est un jeu d'enfant grâce à cet utilitaire quadrilingue de correspondance commerciale.</p>
 
<p class="tip">Niveaux: de base à avancé. </p>
 
<p align="right"><a href="#" onClick="show('span4','lien4', 'titre4');return(false)">Cacher ce texte</a></p>
</span>
<br/>  
<br/>
 
</body>
</html>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
#container{
	width:420px;
	}
 
#hiddenTxt{
	width:300px;
	float:right;
}
 
(les autres class CSS dans le code HTML ne servent qu'au style, et non au positionnement)

En fait, j'aimerais que lorsqu'on "développe" un titre, tous le reste soit repoussé vers le bas...

Mais comment faire??

(Merci d'avance pour vos réponses!)

**E.Bzz** · 13/02/2007, 15h41

Bonjour,
normallement avec display='block' (et non display=''), ça devrait le faire.
Peut-être le float qui interfère ...

A+

**BnA** · 13/02/2007, 15h58

Non, ça ne marche pas...

J'ai essayé sur mon premier titre, mais lorsque je le développe celui-ci, les autres titres se retrouvent coincés dans les 120px restants à gauche de mon div "hiddenTxt"...

Et si je développe par exemple le 1er et le 2ème titre, le texte du 2ème se retrouvera en dessous du texte du premier...

Pourtant, le code tel quel (comme montré plus haut) fonctionne correctement (les autres titres sont repoussés vers le bas en cas de développement) ,mais malheureusement, il faudrait qu'ils soient "hierarchisés" (un peu comme une tabulation)...