Positionnement CSS + HTML

**alpad** · 16/02/2010, 09h50

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 :

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

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

**sebhm** · 16/02/2010, 22h42

il faut enlever la marge sur le body

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

body {margin:0;}

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

top:150px;

ne sert à rien

**alpad** · 17/02/2010, 10h31

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

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

**12monkeys** · 17/02/2010, 21h25

Bonsoir

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

Positionnement CSS + HTML

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager