Positionnement CSS + HTML

Version imprimable

Bonjour a tous,

Je rencontre un problème dans le positionnement d'une DIV.

J'aimerais en effet que toutes mes div soient alignées hors l'une d'entre elles est décalé.

Je ne comprend pas d'où vient le problème ?

Voici le code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
    <title>site</title>
 
    <link href="css/home.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
<div class="header">HEADER</div>
 
<div id="banner">BANNER</div>
 
 
 
 
        <div id=div1>
              DIV1  
        </div>
 
        <div id=div2>
                DIV2
        </div>
 
 
 
<div class="footer">FOOTER</div>
 
</body>
</html>

Et voici le CSS :

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
.header{
 
    background-color: #666;
    width: 900px;
    height: 50px;
}
 
div#banner{
 
    background-color: #999;
    width: 900px;
    height: 100px;
}
 
div#div2 {
	/*background-image: url(images/concepthorizontal.gif);*/
	/*background-repeat: no-repeat;*/
    font-family: Verdana, sans-serif;
    font-size: small;
    text-align: center;
    background-color: #EEE;
    position: absolute;
    width: 450px;
    top: 150px;
    height:500px;
    left:450px;
    color: black;
}
 
div#div1 {
	/*background-image: url(images/concepthorizontal.gif);*/
	/*background-repeat: no-repeat;*/
    font-family: Verdana, sans-serif;
    font-size: small;
    text-align: center;
    background-color: #AAA;
    width: 450px;
    height:500px;
    top: 150px;
    color: black;
}
 
.footer{
 
    font-family: Verdana, sans-serif;
    font-size: small;
    text-align: center;
    color: white;
    background-color: #555;
    width: 900px;
    height: 20px;
    top: 650px;
}

Quelqu'un pourrait il m'aider et m'expliquer s'il vous plait .

16/02/2010, 22h42
sebhm

il faut enlever la marge sur le body

Code:

body {margin:0;}

et ton block 1 n'est pas positionné en absolute, donc le

Code:

top:150px;

ne sert à rien

Bonjour,

Merci a sebhm pour sa réponse ....

Du coup les div s'alignent toutes sans problème.

Mais ça m'amène une autre question, je me rend compte qu'en utilisant le

Code:

1
2
 
	left:450px;

dans le css de mon div je fixe sa position, je voulais savoir comment je pouvais faire en sorte de centrer l'intégralité de mes éléments dans la page, tout en conservant la position actuelle de mes div ?

je remets mes sources pour rappel

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
    <title>site</title>
 
    <link href="css/home.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 <div id=content>   
 
<div class="header">HEADER</div>
 
<div id="banner">BANNER</div>
 
 
 
 
        <div id=div1>
              DIV1  
        </div>
 
        <div id=div2>
                DIV2
        </div>
 
 
 
 
<div class="footer">FOOTER</div>
</div>
</body>
</html>

et le CSS associé :

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
body {
margin:0;
}
 
div#content{
	margin:0 auto;
}
 
.header{
    position: absolute;
	margin-left: auto;
	margin-right: auto;
    background-color: #666;
    width: 900px;
    height: 50px;
}
 
div#banner{
    position: absolute;
	top: 50px;
    background-color: #999;
    width: 900px;
    height: 100px;
}
 
div#div2 {
	/*background-image: url(images/concepthorizontal.gif);*/
	/*background-repeat: no-repeat;*/
    font-family: Verdana, sans-serif;
    font-size: small;
    text-align: center;
    background-color: #EEE;
    position: absolute;
	top:150px;
    width: 450px;
	left:450px;
    height:500px;
    color: black;
}
 
div#div1 {
	/*background-image: url(images/concepthorizontal.gif);*/
	/*background-repeat: no-repeat;*/
    position: absolute;
	font-family: Verdana, sans-serif;
    font-size: small;
    text-align: center;
    background-color: #AAA;
    width: 450px;
    height:500px;
    top: 150px;
    color: black;
}
 
.footer{
 
	position: absolute; 
    font-family: Verdana, sans-serif;
    font-size: small;
    text-align: center;
    color: white;
    background-color: #555;
    width: 900px;
    height: 20px;
    top: 650px;
}

17/02/2010, 21h25
12monkeys

Bonsoir

Une réponse dans la FAQ : http://css.developpez.com/faq/?page=...orizontalement