positionnement de 5 elements en croix

Version imprimable

Bonjour,

Je souhaiterai positionner 5 element (div) "en croix" en fonction des dimensions d'une div containeur, avec un 6eme element en dessous, le tout contenu dans une div "racine".

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 -----------------------------
|                             |
|   -----------------------   |
|  |E1                   E2|  |
|  |                       |  |
|  |                       |  |
|  |          E3           |  |
|  |                       |  |
|  |                       |  |
|  |E4                   E5|  |
|   -----------------------   |
|                             |
|  <---------E6----------->   |
|                             |
 -----------------------------

voici mon code:

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
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
 
<html>
    <head>
        <style> 
             div#R {
                 width:650px;
                 height:900px;
              }         
              div#C1 {
                 width:650px;
                 height:750px;
              }
              div#E1 {
                 margin-top: 0%;
                 float:left;
                 width:200px;
                 height:130px;
              }
              div#E2 {
                 margin-top: 0%;
                 float:right;
                 width:200px;
                 height:130px;
              }
              div#E3 {
                 margin-top: auto;
                 margin-left: auto;
                 margin-right: auto;
                 margin-bottom: auto;
                 width:200px;
                 height:130px;
              }
              div#E4 {                  
                 margin-top: 75%;
                 float:left;
                 width:200px;
                 height:130px;
              }
              div#E5 {
                 margin-top: 75%;
                 float:right;
                 width:200px;
                 height:130px;
              }
              div#E6 {
                 margin-bottom: 0%;
                 width:600px;
                 height:150px;
              } 
        </style>			
    </head>
 
    <body>
		<div id = "R">					
			<div id = "C1">
 
				<div id = "E1"> E1 </div>
 
				<div id = "E2"> E2 </div>
 
				<div id = "E3"> E3 </div>
 
				<div id = "E4">	E4 </div>
 
				<div id = "E5"> E5 </div>
 
			</div>
 
			<div id = "E6"> E6 </div>
 
		</div>	
    </body>
</html>

mais a part E1 et E2 rien n'est placé comme il faut, E3 et entre E1 et E2, E4 et E5 sont en dehors de R.

Bonjour,
comme ça ?

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<style type="text/css">
div#R {
	width:650px;
	height:900px;
	margin:0 auto;
}		
div#C1 {
	width:650px;
	height:750px;
	margin:0 auto;
	background:grey; /* test*/
}
div#E1 {
	float:left;
	width:200px;
	height:130px;
	background:yellow; /* test*/
}
div#E2 {
	float:right;
	width:200px;
	height:130px;
	background:red; /* test*/
}
div#E3 {
	clear:both;
	width:200px;
	height:130px;
	margin:0 auto;
	background:green; /* test*/
}
div#E4 {			
	float:left;
	width:200px;
	height:130px;
	background:purple; /* test*/
}
div#E5 {
	float:right;
	width:200px;
	height:130px;
	background:blue; /* test*/
}
div#E6 {
	clear:both;
	width:600px;
	height:150px;
	margin:0 auto;
	background:pink; /* test*/
}	
 
</style>

11/05/2012, 14h10
Torx26

Merci.

Ca repond de beaucoup mais pas tout, mais je m'en satisferai car a 2-3 modification pres cela correspond a ce qui me faut. Cependant si vous pouviez m'eclaire sur un point, car la difference la plus notable par rapport au comportement que j'avais en tête ce situe sur les 2 element du bas (E4 et E5) qui sont positionne par rapport, il me semble, a l'element au dessus (et il en va de même pour ce dernier. Or j'avais plutot a l'esprit de coller E1 et E2 au sommet de la div C, E4 et E5 au bas de la div C et E3 au milieu de la div C.
Ce faisant la modification de la taille de C, faisant ce "deplacer" les elements.

En resume coller un elemnt dans chaque coin de la div, de maniere "dynamqiue" ainsi que placer un element au milieu de maniere "dynamqiue".

Voila, en esperant avoir été clair.

Je vous remercie pour votre reponse ainsi que pour l'eventuel complement que vous apporterai

Dans ce cas : positionnement "position:absolute;" des 5 éléments dans la div parente C1 (elle-même en "position:relative;")

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
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
<style type="text/css">
div#R {
	width:650px;
	height:900px;
	margin:0 auto;
}
div#C1 {
	position: relative;
	width:100%;
	height:100%;
	margin:0 auto;
	/* pour éviter que les boites se chevauchent (quand on réduit la taille de #R) */
	min-width:600px; /* largeur minimale = (E1 + E3 + E2) */
	min-height:390px; /* hauteur minimale = (E1 + E3 + E4) */
	background:grey; /* test*/
}
div#E1 { /* en haut à gauche */
	position: absolute;
	top:0;
	left:0;
	width:200px;
	height:130px;
	background:yellow; /* test*/
}
div#E2 { /* en haut à droite */
	position: absolute;
	top:0;
	right:0;
	width:200px;
	height:130px;
	background:red; /* test*/
}
div#E3 { /* au centre */
	position: absolute;
	top:50%;
	left:50%;
	margin-left:-100px;
	margin-top:-65px;
	width:200px;
	height:130px;
	background:green; /* test*/
}
div#E4 { /* en bas à gauche */
	position: absolute;
	bottom:0;
	left:0;
	width:200px;
	height:130px;
	background:purple; /* test*/
}
div#E5 { /* en bas à droite */
	position: absolute;
	bottom:0;
	right:0;
	width:200px;
	height:130px;
	background:blue; /* test*/
}
div#E6 {
	clear:both;
	width:100%;
	height:150px;
	margin:0 auto;
	background:pink; /* test*/
}
</style>