[CSS] Problème de centrage horizontal

**BnA** · 11/08/2006, 10h54

Bonjour!

Je sais qu'il s'agit d'un classique, mais voilà, j'ai un problème de centrage de ma page. J'aimerais qu'elle apparaîsse au milieu, et les différentes méthodes que j'ai trouvé sur les forums ne fonctionnent pas (il est possible - probable - que j'aie oublié quelque chose, mais bon)...

Voici mon 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
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
  </head>
  <body>    
    <div id="conteneur">
      <div id="header">       
        Bandeau Flash ELLA (1008px de large)
      </div>
      <div id="haut">
        <ul id="menuhaut">
          <li>
          <a href="#">Menu 1</a></li>
          <li>
          <a href="#">Menu 2</a></li>
          <li>
          <a href="#">Menu 3</a></li>
          <li>
          <a href="#">Menu 4</a></li>
        </ul>
      </div>
      <div id="gauche">
        <p>          menu gauche
        </p>
        <p>          largeur fixe
        </p>
        <ul id="menugauche">
          <li>
          <a href="#">Menu 1</a></li>
          <li>
          <a href="#">Menu 2</a></li>
          <li>
          <a href="#">Menu 3</a></li>
          <li>
          <a href="#">Menu 4</a></li>
        </ul>
      </div>
      <div id="centre">
        <p>          
      </div>
      <div id="pied">
      </div>
    </div>    
  </body>
</html>

et la 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
body {
 
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color:#fff;
margin: 15;
padding: 0;
}
 
p {
margin: 0 0 10px 0;
}
 
#header {
height: 50px;
background-color: #99CCCC;
}
 
#haut {
height: 30px;
background-color:#CCCCFF;
}
 
#conteneur {
position: absolute;
width: 1008px;
background-color:#999999;
 
}
 
#centre {
background-color:#565656;
margin-left: 150px;
}
 
#gauche {
float:left;
width: 150px;
background-color:#454545;
}
 
#pied {
clear:both;
height: 30px;
background-color: #787878;
}
 
#menuhaut {
list-style-type: none;
margin: 0;
padding:0;
background-color:#898989;
width:50%;
}
 
#menuhaut li {
display: inline;
}
 
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
 
#menuhaut a:hover {
text-decoration: none;
}
 
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
 
#menugauche li {
margin-bottom: 5px;
}
 
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
 
#menugauche a:hover {
text-decoration: none;
}
 
 
/* CSS Document */

Voilà, j'espère que vous pourrez m'aider, je sèche là dessus depuis trop longtemps!

Merci d'avance!

**Joe Le Mort** · 11/08/2006, 11h13

tu veux centrer quoi ? toute la page entiere, centrer le menu ? la page de contenu ?

**BnA** · 11/08/2006, 11h15

J'aimerais que toute la page soit centrée au milieu de l'écran, et je le répète (mais c'est très important), quelque soit la résolution (1024 et +).

Comme par exemple sur http://www.transparent.com...

**Joe Le Mort** · 11/08/2006, 11h19

ca pose probleme avec ca :

Code :

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

1
2
3
4
5
#conteneur {
position: absolute;
width: 1008px;
background-color:#999999;
}

essaye :

Code :

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

1
2
3
4
5
#conteneur {
     margin-left: auto;
     margin-right: auto;
     width: ...; /* largeur obligatoire pour être centré */
     }

**Linaa** · 11/08/2006, 11h21

Tu peux rajouter un margin:auto au body
(eventuellement margin-left:auto et margin-right:auto si tu veux spécifier une marge de haut ou bas)

**BnA** · 11/08/2006, 11h23

J'avais déjà essayé, mais ça ne marche pas...

**BnA** · 11/08/2006, 11h24

La méthode de Joe le Mort marche, mais pas sur Iexplorer...

**Linaa** · 11/08/2006, 11h25

Montres le code que t'as mis...

[CSS] Problème de centrage horizontal

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager