Ma page de droite reste sous ma zone de gauche

**philou029** · 31/05/2007, 15h20

Bonjour,

Ma page est divisée en quatres zones. Le haut de page, la zone de gauche(liens du sîte), la zone de droite et le pied de page.

Mon problème se situe à l'affichage, en effet la zone de droite se cale sous la zone de gauche.

Voici une partie du CSS :

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
/* navigation */
.navigation {
	margin-bottom: 4px;
}
.navigation a {
	background-color: #4A91C3;
	color: #FFF;
	float: right;
	font: bold 1.2em "Trebuchet MS",sans-serif;
	padding: 8px 0;
	width: 19%;
	border-right: 1px solid #FFF;
	text-align: center;
	text-decoration: none;
}
.navigation a:hover {
	background-color: #000;
	color: #FFF;
}
 
/* main */
.main {
	clear: both;
	padding: 8px 18px;
 
}
 
/* Partie gauche de la page */
.sidenav h1,.sidenav ul {
	padding-left: 12px; 
}
.sidenav {
	background: #EEE;
	border: 1px solid #E5E5E5;
	float: left; 
	width: 170px; 
	text-decoration: none;
}
.sidenav h1 {
	color: #666; 
	font-size: 1.3em;
	height: 20px;
	margin-top: 1.2em;
	text-decoration: none;
}
.sidenav ul {
	border-top: 1px solid #FAFAFA;
	margin: 0;
	padding: 0;
}
.sidenav li {
	border: 1px solid #FAFAFA;
	border-top: none;
	list-style: none;
	margin: 0;
}
.sidenav li a {
	color: #777; 
	display: block;
	font-size: 0.9em;
	padding: 3px 6px 3px 14px;
	text-decoration: none;
}
.sidenav li a:hover {
	color: #111;
}
 
/* Partie droite de la page */
.content {
	float: right;
	width: 550px; 
}
.content .item {
	padding: 6px 12px;
	border: 1px solid #EEE;
	background: #FFF;
	margin-bottom: 8px;
}
 
.content .item2 {
	padding: 12px; 
	border: 1px solid #EEE; 	
             background: #FFF; 
	margin-bottom: 19px; 
}
 
.content .descr {
	color: #333;
	margin-bottom: 6px;
}
.content li {
	list-style: url(img/li.gif);
	margin-left: 18px;
}

Depuis quelques jours je cherche, en vain...

Merci d'avance

Philippe

**pierrot10** · 31/05/2007, 15h40

Salut
Elle se trouve, sous ou au-dessous. Dans le cas du sous essaye ceci:
Dans .content je ne crois pas que c'est indispensable de mettre float:right.
Par contre, dans ton .content{} essaye avec margin-left:[une valeur plus grande que la largeur de ta partie de gauche]

ou overflow:hidden; dans le div qui représente ta partie de gauche. De tete, chais plus le plus juste mais avec l'un de ces trois tu devrais pouvoir resoudre ton problème
Essaye, good luck

**philou029** · 31/05/2007, 16h03

J'ai essayé les solutions. Si je retire float:right, la page de droite se cale au-dessous de la zone de gauche et en décalant vers la gauche. Les deux autres solutions, n'ont pas d'effets. En fait, il faut que la zone de droite "remonte" à la verticale pour avoir un bon affichage.

**Candygirl** · 31/05/2007, 16h46

Hello,

Il manque quelques éléments pour pouvoir t'aider efficacement:

- Quelle dimension as-tu donner au conteneur, 720px ? (auquel cas les 2px de bordure de ton menu seraient la cause de ton désagrément)

- Le problème apparaît-il sur tous les navigateurs ou juste IE ?

Il serait bien d'avoir la structure html correspondante.

**philou029** · 31/05/2007, 17h08

Je viens de tester avec mozilla... C'est pas fameux. Mon site a pas la même tête. Je vais copier une page HTML et tout mon code CSS. J'ai beau fouiner dans le code, modifier... pas de changement.

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
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<title>Site officiel de l'ASST</title>
</head>
<body>
<div class="container">
 
	<div class="main">
 
		<div class="content">
 
			<div class="item">
 
				<h1 align="center">Liens Utiles</h1>
 
			</div>
 
		</div>
 
	</div>
 
</div>
 
</body>
 
</html>

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
 
/* elements par default */
* {
	margin: 0;
	padding: 0;
}
a {
	color: #36C;
}
a:hover {
	color: #06F;
}
body {
	background: #EEE url(img/bg.gif);
	color: #444;
	font: normal 62.5% "Lucida Sans Unicode",sans-serif; /*hauteur page*/
	margin: 0;
}
input {
	color: #555;
	font: normal 1.1em "Lucida Sans Unicode",sans-serif;
}
p,cite,code,ul {
	font-size: 1.2em;
	padding-bottom: 1.2em; /*Espace entre deux lignes dans une balise paragraphe*/
}
 
h1 {
	font-size: 1.4em;
	margin-bottom: 4px; /*Espace entre le bas de la zone de titre et le texte*/
}
code {
	background: url(img/bgcode.gif);
	border: 1px solid #F0F0F0;
	border-left: 6px solid #39F;
	color: #555;
	display: block;
	font: normal 1.1em "Lucida Sans Unicode",serif;
	margin-bottom: 12px;
	padding: 8px 10px;
	white-space: pre;
}
cite {
	background: url(img/quote.gif) no-repeat;
	color: #666;
	display: block;
	font: normal 1.3em "Lucida Sans Unicode",serif;
	padding-left: 28px;
}
h1,h2,h3 {
	color: green;
	padding-top: 6px;
}
 
/* misc */
.clearer {
	clear: both;
}
 
/* structure */
.container {
	background: url(img/bgcontainer.gif) repeat-y;
	margin: 0 auto;
	padding-bottom: 6px;
	width: 767px;
 
}
.header {
	background: url(img/Banniere.jpg) repeat-x; /*Image pour le haut de page*/
}
 
/* title */
.title h1 {
	color: #FFF;
	font: normal 3em Verdana,sans-serif;
	height: 150px;
	line-height: 150px;
	margin-bottom: 8px;
	text-align: center;
}
/* navigation */
.navigation {
	margin-bottom: 4px;
}
.navigation a {
	background-color: #4A91C3;
	color: #FFF;
	float: right;
	font: bold 1.2em "Trebuchet MS",sans-serif;
	padding: 8px 0;
	width: 19%;
	border-right: 1px solid #FFF;
	text-align: center;
	text-decoration: none;
}
.navigation a:hover {
	background-color: #000;
	color: #FFF;
}
 
/* main */
.main {
	clear: both;
	padding: 8px 18px;
 
}
 
/* Partie gauche de la page */
.sidenav h1,.sidenav ul {
	padding-left: 12px; /*Marge interne de gauche ex:Saison*/
}
.sidenav {
	background: #EEE;
	border: 1px solid #E5E5E5;
	float: left; /*Coté ou la barre de gauche se trouve sur la page*/
	width: 170px; /*taille celulle ex:Administration*/
	text-decoration: none;
	overflow:hidden;
}
.sidenav h1 {
	color: #666; /*couleur des titres ex:Saison*/
	font-size: 1.3em;
	height: 20px;
	margin-top: 1.2em;
	text-decoration: none;
}
.sidenav ul {
	border-top: 1px solid #FAFAFA;
	margin: 0;
	padding: 0;
}
.sidenav li {
	border: 1px solid #FAFAFA;
	border-top: none;
	list-style: none;
	margin: 0;
}
.sidenav li a {
	color: #777; /*couleur écriture ex:Administration*/
	display: block;
	font-size: 0.9em;
	padding: 3px 6px 3px 14px;
	text-decoration: none;
}
.sidenav li a:hover {
	color: #111;
}
 
/* Partie droite de la page */
.content {
	width: 550px; /*Taille cellue ex:Histoire de l'ASST*/
	float:right;
}
.content .item {
	padding: 6px 12px;
	border: 1px solid #EEE;
	background: #FFF;
	margin-bottom: 8px;
}
 
.content .item2 {
	padding: 12px; /*Espace entre le texte et la bordure de gauche*/
	border: 1px solid #EEE; /*Largeur + couleur de la bordure de la boîte "item2"*/
	background: #FFF; /*Couleur de fond de la boîte "item2"*/
	margin-bottom: 19px; /*Espace entre deux boîtes "item2"*/
}
 
 
.content .descr {
	color: #333;
	margin-bottom: 6px;
}
.content li {
	list-style: url(img/li.gif);
	margin-left: 18px;
}
 
/* pied de page */
.footer {
	background: #FFF;
	border: 1px solid #EEE;
	color: #666;
	font-size: 1.1em;
	margin: 0 auto;
	text-align: center;
	padding: 6px;
	width: 720px;
}
.footer a {
	color: #36C;
	text-decoration: none;
}
.footer a:hover {
	color: #06F;
	text-decoration: underline;
}

**Candygirl** · 31/05/2007, 17h53

Envoyé par philou029

Je viens de tester avec mozilla... C'est pas fameux. Mon site a pas la même tête

Tu devrais commencer par renseigner un doctype correcte et complet tout en haut de ta page afin que IE et les autres navigateurs interprètent ton code de la même manière.

Envoyé par philou029

Je vais copier une page HTML et tout mon code CSS.

Je ne trouve pas trace de ton class="navigation" dans le code html fourni ?

Pour des élément unique sur ta page (genre le conteneur, le menu,...), l'utilisation d'un id plutôt qu'une class serait plus judicieux (mais on est bien d'accord que ce n'est pas ça qui va résoudre ton problème

)

**philou029** · 01/06/2007, 10h54

tu penses que l'utilisation du class="navigation" changerai quelque chose ?

Je suis à l'écoute de toutes idées. Pour information, j'utilise des includes pour plaçer les éléments sur la page.

**Candygirl** · 01/06/2007, 11h02

Envoyé par philou029

tu penses que l'utilisation du class="navigation" changerai quelque chose ?

Je ne comprends pas bien; Tu parlais d'un problème entre ta zone droite et de contenu. J'imaginais que ta zone droite c'était la partie concernée par le .navigation dans ton css mais je ne trouve pas trace d'un class="navigation" dans ta structure html, d'où mon incompréhension.

N'aurais-tu pas un lien vers ta page en ligne ?

**philou029** · 01/06/2007, 11h06

Je sais que c'est pas evident de decrire le problème.

Le site n'est pas encore en ligne. Je suis dessus depuis une semaine environ.

Concernant le .navigation, comment l'aurais tu plaçé ? Je débute dans le dev web.

**philou029** · 04/06/2007, 15h15

C'est bon le problème est presque géré, il s'agissait des includes. Par contre, maitenant, j'ai un nouveau problème.. Si je n'y arrive pas je reviendrai ici. Merci

Ma page de droite reste sous ma zone de gauche

CSS

Discussions similaires

Partager

Partager