Centrer ma page dans la fenetre en CSS

**mfofana** · 18/08/2008, 11h43

Bonjour à tous

J'essaie depuis un bon moment d'arriver sans succès à centrer le contenu de ma page HTML dans la fenêtre de mon navigateur et ce malgré les indications retrouvées dans mes diverses recherches sur le Net.
C'est pour cela que j'ai décidé de copier en intégralité le contenu de ma page sur un forum dans l'espoir que quelqu'un puisse m'aider à y arriver .

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
 
<html>
<head>
<title>01_home_Contenu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; >
<!-- ImageReady Slices (01_home_Contenu.psd) -->
<div margin:0 auto; width:766px; text-align:left;">
	<div style="position:absolute; left:0px; top:0px; width:896px; height:115px;">
		<img src="images/01_home_Contenu_01.gif" width="896" height="115" alt="">
	</div>
	<div style="position:absolute; left:896px; top:0px; width:4px; height:120px;">
		<img src="images/top_bg.jpg" width="4" height="120" alt="">
	</div>
	<div style="position:absolute; left:0px; top:115px; width:67px; height:562px;">
		<img src="images/01_home_Contenu_03.gif" width="67" height="562" alt="">
	</div>
	<div style="position:absolute; left:67px; top:115px; width:2px; height:264px;">
		<img src="images/01_home_Contenu_04.gif" width="2" height="264" alt="">
	</div>
	<div style="position:absolute; left:69px; top:115px; width:768px; height:264px;">
		<img src="images/01_home_Contenu_05.gif" width="768" height="264" alt="">
	</div>
	<div style="position:absolute; left:837px; top:115px; width:59px; height:562px;">
		<img src="images/01_home_Contenu_06.gif" width="59" height="562" alt="">
	</div>
	<div style="position:absolute; left:896px; top:120px; width:4px; height:557px;">
		<img src="images/01_home_Contenu_07.jpg" width="4" height="557" alt="">
	</div>
	<div style="position:absolute; left:67px; top:379px; width:2px; height:242px;">
		<img src="images/01_home_Contenu_08.gif" width="2" height="242" alt="">
	</div>
	<div style="position:absolute; left:69px; top:379px; width:768px; height:242px;">
		<img src="images/01_home_Contenu_09.gif" width="768" height="242" alt="">
	</div>
	<div style="position:absolute; left:67px; top:621px; width:770px; height:1px;">
		<img src="images/01_home_Contenu_10.gif" width="770" height="1" alt="">
	</div>
	<div style="position:absolute; left:67px; top:622px; width:763px; height:55px;">
		<img src="images/01_home_Contenu_11.gif" width="763" height="55" alt="">
	</div>
	<div style="position:absolute; left:830px; top:622px; width:7px; height:55px;">
		<img src="images/01_home_Contenu_12.gif" width="7" height="55" alt="">
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

Je vous remercie d'avance

Cordialement

**seby2027** · 18/08/2008, 12h13

Bonjour,

Je te conseillerai tout d'abord de disocier ton code HTML de ton code CSS (fais deux fichiers).

Ensuite, dans ton fichier CSS :

Code :

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

1
2
3
4
5
body
{
width:950px; // la taille que tu veux
margin:auto;
}

**romain_ci** · 18/08/2008, 12h25

Code :

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

1
2
3
4
5
6
7
8
 
#TonConteneur {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: XXXpx;
    height:XXXpx;
}

PS : Pourquoi tu ne met pas ton css dans un fichier a part. car la tu n'est pas valide w3c

**mfofana** · 18/08/2008, 12h26

J'ai essayé ta suggestion mais cela n'a rien changé malheureusement;
la page reste toujours bloqué a gauche de l'ecran

**romain_ci** · 18/08/2008, 12h29

Envoyé par mfofana

J'ai essayé ta suggestion mais cela n'a rien changé malheureusement;
la page reste toujours bloqué a gauche de l'ecran

La mienne ou celle de seby2027 ??

**Damouille** · 18/08/2008, 12h43

Bonjour,
En fait, Romain et seby utilsent la meme technique qui constitue à fixer une "width" et un margin: auto

C'est la meilleure technique mais elle ne marche pas avec tous les doctype (surtout avec ie je crois).

mfofana, ton document ne contient pas de doctype. Utilise un doctype recent et les solutions proposées devrait fonctionner.

**mfofana** · 18/08/2008, 12h56

C'est celle de seby2027 qui ne marche pas
Je vais essayer le tien et te tenir au courant

**mfofana** · 18/08/2008, 13h20

STP pourrais-tu m'aider à trouver le Doctype adéquat à mon code HTML ; j'ai essayé le HTML4 et XHTML1 pour le moment et cela m'a généré des erreurs à la validation.

**mfofana** · 18/08/2008, 13h50

Merci à tous

J'ai pu enfin centrer ma page; en effet il a fallu que que je regenère ma page en XHTML 1.0 qui a automatiquement ajouté un doctype et faire position: relative; margin-left: auto; margin-right: auto;

pour avoir la page centré.

Merci beaucoup

Centrer ma page dans la fenetre en CSS

Centrer un élément en CSS

Discussions similaires

Partager

Partager