Problème de positionnement de DIV en CSS

Version imprimable

Bonjour,
Sur un site, j'ai 4 cadres.

http://img293.imageshack.us/img293/4440/pagehk0.th.gifhttp://img293.imageshack.us/images/thpix.gif

Pour 1, 2 et 3, c'est bon, mais je n'arrive pas à placer 4 correctement. Il se place en haut, sous les cadres précédents. Voici les styles appliqués aux cadres.
Code:

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 #cadre1 { float: left; width: 210px; padding-top: 0px; } #cadre2 { position: absolute; left: 10px; right: 10px; margin-left: 220px; margin-right: 220px; display: block; border: 1px solid #369; background-color: #FFF; padding: 5px; } #cadre3 { float: right; width: 210px; padding-top: 0px; } #cadre4 { margin: auto; color: #369; }

31/10/2008, 11h46
devyan

bonjour,

il faut annuler le "float".
pour cela ajoute simplement : float:none; et clear:both; dans la définition de #cadre4.

Tu risques sans doute d'avoir encore un recouvrement avec #cadre2 que tu peux résoudre en le rendant "position:relative; float:left;" comme #cadre1

Yan.
31/10/2008, 13h54
eric41

Je confirme le recouvrement de 2 et 4, que j'avais déjà rencontré lors de mes essais, le cadre 4 se positionnant juste sous 3 sans tenir compte de la hauteur de 2. PAr contre, en modifiant le style de 2 comme tu me l'as indiqué, j'obtiens ceci :/

http://img110.imageshack.us/img110/3731/page2nq8.th.gif http://img110.imageshack.us/images/thpix.gif
31/10/2008, 14h58
devyan

effectivement, il faut aussi enlever tes marges sur #cadre2 du coup (je n'avais pas vu que tu n'avais pas utilisé left)

Je pense que un clear both,un width et un float ferait l'affaire.
Code:

1 2 3 4 5 #cadre4 { width: 100%; float: left; clear: both; }
;)

31/10/2008, 15h58
devyan
Citation:
Envoyé par julied2

Je pense que un clear both,un width et un float ferait l'affaire.

Code:

1 2 3 4 5 #cadre4 { width: 100%; float: left; clear: both; }

;)
pour le width il vaut mieux utiliser auto plutôt que 100% si tu as du padding/margin. (100% n'en tient pas compte)

Encore pire.

http://img123.imageshack.us/img123/3246/page3up2.th.gifhttp://img123.imageshack.us/images/thpix.gif

Je remets les styles actuels au cas où j'aurai oublié qqch.
Code:

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 #cadre1 { /*position: absolute;*/ float: left; width: 210px; padding-top: 0px; font-family: "Trebuchet MS", Helvetica, Verdana; font-size: 10pt; } #cadre2 { position: relative; float: left; left: 10px; right: 10px; /* margin-left: 220px; margin-right: 220px;*/ display: block; border: 1px solid #369; background-color: #FFF; padding: 5px; } #cadre3 { float: right; width: 210px; padding-top: 0px; font-family: "Trebuchet MS", Helvetica, Verdana; font-size: 10pt; } #cadre4 { /*width: auto;*/ float: none; clear: both; margin: auto; color: #369; border: 1px solid black; }
J'ai aussi essayé la proposition de julied2.

Ne serait-il pas plus simple de faire un grand cadre englobant 1, 2 et 3, et de placer 4 en relatif ?

31/10/2008, 19h43
HiRoN

Salut,
Un lien qui pourrait t'être utile en l'adaptant... (affiche la source)
31/10/2008, 19h45
eric41

Merci pour ton lien Hiron, je pense effectivement que ça va me servir.
31/10/2008, 19h57
HiRoN

Citation:

Envoyé par eric41

Merci pour ton lien Hiron, je pense effectivement que ça va me servir.

L'avantage est ce type de structure (site 100% hauteur) :

- Si le contenu est inférieur à la hauteur de la page, le footer se place en bas de page.
- Si le contenu est supérieur, le footer descend et s'ajuste en fonction.

A modifier à ta convenance ;)

Citation:

Envoyé par eric41

Encore pire.

http://img123.imageshack.us/img123/3246/page3up2.th.gif http://img123.imageshack.us/images/thpix.gif

Je remets les styles actuels au cas où j'aurai oublié qqch.

Code:

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
#cadre1 {
	/*position: absolute;*/
	float: left;
	width: 210px;
	padding-top: 0px;
	font-family: "Trebuchet MS", Helvetica, Verdana;
	font-size: 10pt;
}
#cadre2 {
	position: relative;
	float: left;
	left: 10px;
	right: 10px;
/*	margin-left: 220px;
	margin-right: 220px;*/
	display: block;
	border: 1px solid #369;
	background-color: #FFF;
	padding: 5px;
}
#cadre3 {
	float: right;
	width: 210px;
	padding-top: 0px;
	font-family: "Trebuchet MS", Helvetica, Verdana;
	font-size: 10pt;
}
#cadre4 {
	/*width: auto;*/
	float: none;
	clear: both;
	margin: auto;
	color: #369;
	border: 1px solid black;
}

J'ai aussi essayé la proposition de julied2.

Ne serait-il pas plus simple de faire un grand cadre englobant 1, 2 et 3, et de placer 4 en relatif ?

Pour moi il n'y a pas de problème avec cette CSS... :?

Peut être que le soucis vient du html. Attention avec les éléments "Float".
il est préférable de les placer avant le contenu "fixe" (ici cadre2).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="cadre1">	Praesent facilisis. Nam quis elit. Cras nisl nisl, laoreet quis, iaculis vitae, condimentum ut, nisi. 
	Donec dolor sapien, rhoncus quis; placerat lobortis, tempor vitae, risus. 
	Pellentesque at diam non purus ornare scelerisque. Aliquam quis mi.
</div><div id="cadre3">	Praesent facilisis. Nam quis elit. Cras nisl nisl, laoreet quis, iaculis vitae, condimentum ut, nisi. 
	Donec dolor sapien, rhoncus quis; placerat lobortis, tempor vitae, risus. 
	Pellentesque at diam non purus ornare scelerisque. Aliquam quis mi.
</div><div id="cadre2">	Praesent facilisis. Nam quis elit. Cras nisl nisl, laoreet quis, iaculis vitae, condimentum ut, nisi. 
	Donec dolor sapien, rhoncus quis; placerat lobortis, tempor vitae, risus. 
	Pellentesque at diam non purus ornare scelerisque. Aliquam quis mi.
</div><div id="cadre4">	Praesent facilisis. Nam quis elit. Cras nisl nisl, laoreet quis, iaculis vitae, condimentum ut, nisi. 
	Donec dolor sapien, rhoncus quis; placerat lobortis, tempor vitae, risus. 
	Pellentesque at diam non purus ornare scelerisque. Aliquam quis mi.
</div>

01/11/2008, 19h07
HiRoN

Citation:

Peut être que le soucis vient du html.

Tu ne proposes à aucun moment un DocType.
01/11/2008, 23h06
devyan

Citation:

Envoyé par HiRoN

Tu ne proposes à aucun moment un DocType.

Exact. Je n'y ai pas pensé (son code ne nous ayant pas été fourni).

Je met personnellement systématiquement un DocType...

Et effectivement sans ça fonctionnem moins bien ;)
05/11/2008, 12h22
eric41

J'utilise un doctype XHTML Transitional.

Quelque chose comme ça :

Code:

1
2
3
4
5
6
7
8
9
<div style="overflow:hidden;background:red">
   <div style="width:210px;float:left;background:green">Cadre 1</div>
 
   <div style="width:210px;float:right;background:blue">Cadre 3</div>
 
   <div style="overflow:hidden;background:yellow;height:500px">Cadre 2</div>
</div>
 
<div style="background:purple">Cadre 4</div>

T'as le droit d'enlever le height sur le cadre 2.