positionnement de 5 elements en croix

**Torx26** · 11/05/2012, 12h16

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 :

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
 
 -----------------------------
|                             |
|   -----------------------   |
|  |E1                   E2|  |
|  |                       |  |
|  |                       |  |
|  |          E3           |  |
|  |                       |  |
|  |                       |  |
|  |E4                   E5|  |
|   -----------------------   |
|                             |
|  <---------E6----------->   |
|                             |
 -----------------------------

voici mon code:

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
 
<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.

Invité · 11/05/2012, 12h50

Bonjour,
comme ça ?

Code css :

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
<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>

**Torx26** · 11/05/2012, 14h10

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

Invité · 11/05/2012, 14h53

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

Code css :

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
<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>

positionnement de 5 elements en croix

HTML

Discussions similaires

Partager

Partager