Centrage d'un div dans un div

**kader53** · 01/12/2015, 22h54

Bonsoir à toutes et à tous.

Je dois remarquer que je suis amateur autodidacte en matière de conception web !!!

Je travail avec une résolution d'écran de 1024x768.

En utilisant une résolution superieure tel que 1440x900 mes page sont plaquées à gauches (voir svp http://www.winsem.net/websavoir

Donc ma question est que dois-je faire pour que mes pages occupent toujour toute la largeur de l'écran quelque soit sa résolution, ou du moins comment les centrer.

Autre problème.

Pourquoi j'arrive à centrer une anim flash rien qu'avec un text-align: center alors que je ne peut pas le faire pour un div contenu dans un autre div, Que dois-je faire pour y parvenir.

svp voir

http://www.winsem.net/Tests

avec chrome et firefox et les deux réolutions 1024x768 et 1440x900

J'espère que ma demande et claire.
Un ample merci pour tout le monde .
CORDIALEMENT.

Voici mes codes:

Html :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
     <title>Acceuil</title>
     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	 <link rel="stylesheet" type="text/css" href="TestCentrageDiv.css" media="screen" />
 
</head>
<body>
<div id="divanimflash">
<embed width="950" height="350" border="0" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="TestCarrousell.swf"></embed>
</div>
 
<div id="Principale">
	<div id="Secondaire">
		<div id="divgov">
		Div1
		</div>
		<div id="divcarte">
		Div2
		</div>
		<div id="divcat">
		Div3
		</div>
 
	</div>
</div>
</br></br>
</body>
</html>

et

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
 
/* Positionnement des div gouvernorat, carte et categorie */
#divanimflash
	{
	position:absolute;
	margin-left:15px;
	margin-top:20px;
	width:96%; /* J'utilise le % pour adapter la largeur du div à celle de l'écran
					pour les résolution supéririeure à 1024x768 */
	height:370px;
	border: 1px red solid;
	text-align:center;  /* Avec [text-align:center] je centre l'animation dans son div et ce quelque soit la résolution de l'écran */
	padding:5px;
	overflow:auto
	}
 
#Principale
	{
	position:absolute;
	margin-left:5px; 
	margin-top:475px;
	width:97%; /* J'utilise le % pour adapter la largeur du div à celle de l'écran
					pour les résolution supéririeure à 1024x768 */
	height:385px;
	text-align:center; 	/* Je n'arruve pas à centrer avec [text-align:center]les trois div #divgov, #divcarte et #divcat dans
							le div #Principale */
	border:1px red solid;
	padding:5px;
	overflow:auto;  /* j'utilise overflow pour contourner un débordement de la fenêtre constaté avec firefox */
	}
 
#Secondaire /* J'ai crée au sein du div #Principale ce div #Secondaire qui englobe les trois
              div #divgov, #divcarte et #divcat mais sans résultat */
	{
	position:absolute;
	margin:0 auto;
	margin-top:0px;
	width:960px;
	height:375px;
	border:1px blue solid;
	padding:5px
	}
 
#divgov
	{
	position:absolute;
	margin-left:0px;
	margin-top:0px;
	width:400px;
	height:350px;
	border:1px grey solid;
	background-color:white
	}
 
#divcarte
	{
	position:absolute;
	margin-left:412px;
	margin-top:0px;
	width:300px;
	height:351px;
	border:1px green solid;
	}
 
#divcat
	{
	position:absolute;
	margin-left:722px;
	margin-top:0px;
	width:235px;
	height:350px;
	border:1px black solid;
	background-color:white
	}

**JefReb** · 02/12/2015, 10h53

Bonjour,
en premier il manque un ; après overflow:auto
Pour le text-align: center; je ne sais pas peut être qu'un expert répondrait plus facilement.

Mais pourquoi ne pas encapsuler embed dans une div centée. Cela fonctionne bien.

Pour les pages plaquées à gauche, il suffit d'enlever position:absolute; à #secondaire et d'y mettre un margin 0 auto;

Voici le code modifiée:

Code html :

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
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">
/* Positionnement des div gouvernorat, carte et categorie */
#divanimflash
        { position:absolute;
        width:96%; 
        height:370px;
        margin:0;
        padding:0;
        overflow:auto;
        border: 1px red solid;
        }
.videoembed 
        { width:950px; 
          height:350px; 
          margin:10px auto; 
          }
#Principale
        {
        position:absolute;
        margin-left:5px; 
        margin-top:475px;
        width:97%; /* J'utilise le % pour adapter la largeur du div à celle de l'écran
                                        pour les résolution supéririeure à 1024x768 */
        height:385px;
        text-align:center;      /* Je n'arruve pas à centrer avec [text-align:center]les trois div #divgov, #divcarte et #divcat dans
                                                        le div #Principale */
        border:1px red solid;
        padding:5px;
        overflow:auto;  /* j'utilise overflow pour contourner un débordement de la fenêtre constaté avec firefox */
        }
 
#Secondaire /* J'ai crée au sein du div #Principale ce div #Secondaire qui englobe les trois
              div #divgov, #divcarte et #divcat mais sans résultat */
        {
        //position:absolute;
        margin:0 auto;
        //margin-top:0px;
        width:960px;
        height:375px;
        border:1px blue solid;
        padding:5px
        }
 
#divgov
        {
        cposition:absolute;
        margin-left:0px;
        margin-top:0px;
        width:400px;
        height:350px;
        border:1px grey solid;
        background-color:white
        }
 
#divcarte
        {
        position:absolute;
        margin-left:412px;
        margin-top:0px;
        width:300px;
        height:351px;
        border:1px green solid;
        }
 
#divcat
        {
        position:absolute;
        margin-left:722px;
        margin-top:0px;
        width:235px;
        height:350px;
        border:1px black solid;
        background-color:white
        }
</style>
</head>
<body>
<div id="divanimflash">
<div class="videoembed">
<embed width="950" height="350" border="0" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="/video/TestCarrousell.swf"></embed>
</div>
</div>
 
<div id="Principale">
	<div id="Secondaire">
		<div id="divgov">
		Div1
		</div>
		<div id="divcarte">
		Div2
		</div>
		<div id="divcat">
		Div3
		</div>
 
	</div>
</div>
</br></br>
</body>
</html>

&

**JefReb** · 02/12/2015, 11h43

J'ai répondu un peu vite, et il est possible de faire la même chose sans utiliser la position absolue et en utilisant le float.

Voir http://codepen.io/anon/pen/RrbgwB

Code html :

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
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">
#divanimflash
        {
        width:97%; 
        height:372px;
        margin:0;
        padding:0;
        overflow:auto;
        border: 1px red solid;
        }
.videoembed 
        { width:950px; 
          height:350px; 
          margin:10px auto;
          border: 1px blue solid; 
          }
#Principale
        {
        width:97%;
        height:385px;
        border:1px red solid;
        overflow:none;
        }
 
#Secondaire 
        {
        width:948px;
        height:354px;
        margin:10px auto 10px auto;
        padding:0;
        border:1px solid blue;
        }
 
#divgov
        { 
        float:left;
        width:400px;
        height:350px;
        margin:1px;
        border:1px grey solid;
        background-color:white
        }
 
#divcarte
        {
        float:left;
        width:300px;
        height:350px;
        margin:1px;
        border:1px green solid;
        }
 
#divcat
        {
        float:left;
        width:235px;
        height:350px;
        margin:1px;
        border:1px black solid;
        background-color:white
        }
</style>
</head>
<body>
<div id="divanimflash">
<div class="videoembed">
<embed width="950" height="350" border="0" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="/video/TestCarrousell.swf"></embed>
</div>
</div>
 
<div id="Principale">
	<div id="Secondaire">
		<div id="divgov">
		Div1
		</div>
		<div id="divcarte">
		Div2
		</div>
		<div id="divcat">
		Div3
		</div>
	</div>
</div>
</body>
</html>

Bien sûr il faut ajuster les width et hight en fonction des margin et padding.
Voila si ça peu aider ...

**kader53** · 02/12/2015, 11h59

Bonjour JefReb,

Je tiens à vous remercier amplement pour votre aide combien precieuse pour un amateur comme mois.

Aussi, et si vous le permettez, est ce que vous pouvez me dire quel est l'interet du 2ème div pour l'animation et pourquoi le margin:10px auto ?

Encore une fois et toujours un grand merci

Cordialement.

A. Farhani (cmkader53)

Centrage d'un div dans un div

Centrer un élément en CSS

Discussions similaires

Partager

Partager