comment centrer la page

**epona1** · 12/07/2006, 00h28

Bonjour
Comment fait-on pour centrer sa page dans la fenêtre? Je prépare mon site sur Dreamweaver et je n'ai trouvé de réponse que pour le centrage horizontal.

**masu** · 12/07/2006, 10h04

Ca marche avec le system des marges negatives

Code :

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

1
2
3
4
5
6
7
8
9
10
#content {
	position:absolute;
	top: 50%;
	left: 50%;
	margin-left: -100px;/*- la 1/2 de la largeur*/
	margin-top: -150px;/*- la 1/2 de la hauteur*/
	width: 200px;
	height: 300px;
	background: #0EE;
}

Code :

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

1
2
3
<div id="content">
bla bla bla
</div>

**epona1** · 12/07/2006, 10h49

Merci pour la réponse. Mais comment placer correctement ces 2 groupes de texte?

**Bobybx** · 12/07/2006, 10h56

Tu fais ta page html ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div id="content">
    bla bla bla
    </div>
  </body>
</html>

Et tu crées un fichier style.css avec le code suivant dedans

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
#content {
	position:absolute;
	top: 50%;
	left: 50%;
	margin-left: -100px;/*- la 1/2 de la largeur*/
	margin-top: -150px;/*- la 1/2 de la hauteur*/
	width: 200px;
	height: 300px;
	background: #0EE;
}

Tu peux mettre le code css directement dans le html mais je te conseille de garder le css séparé de ton fichier HTML, questionde modularité et de séparation de présentation et contenu

**epona1** · 12/07/2006, 11h28

La première partie de la réponse, ça va.

Pour ce qui est du "fichier CSS", je nage... Si tu pouvais me dire comment (où) placer simplement ce texte dans le HTML, ce serait super. J'ai essayé au petit bonheur, mais ça n'a pas marché et le texte est apparu dans la fenêtre du navigateur

**Bobybx** · 12/07/2006, 11h35

Voilà le html avec le css incorporé

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
 
<html>
  <head>
    <style type="text/css">
      #content {
        position:absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;/*- la 1/2 de la largeur*/
        margin-top: -150px;/*- la 1/2 de la hauteur*/
        width: 200px;
        height: 300px;
        background: #0EE;
      }
    </style>
  </head>
  <body>
    <div id="content">
    bla bla bla
    </div>
  </body>
</html>

Bonne continuation...

**epona1** · 12/07/2006, 11h57

Déprimant. ça ne marche pas. ça chasse ma page vers la droite. j'ai fouillé dans le bouquin et essayé de créer 1 feuille de style, mais il n'y a pas de zone où rentrer du texte. J'ai indiqué des valeurs de positionnement haut et droite (50%). Même résultat : tout part à droite...Mystère

**Bobybx** · 12/07/2006, 12h42

Le code donné marche, c'est certain!

Quel est ton code exact ??

**maximenet** · 12/07/2006, 12h58

euhhh je pense avoir une meilleur méthode en faite
pour le body:

Code :

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

1
2
3
4
5
6
 
body{
	width:100%;
	height:100%;
	text-align: center; /* pour corriger le bug de centrage IE */
}

tu créer un bloc dans ton body

Code :

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

1
2
3
4
5
6
7
 
#center{
	text-align:left; /* on rétablit l'alignement normal du texte */
	margin:0 auto; /* permet de centrer ton bloc */ 
	width:926px; /* taille de ta page en largeur */
	height:500px; /* hauteur, tu peux mettre ce que tu veux, faut au moin 1px */
}

et là hop tout est centrer

logiquement

**Bobybx** · 12/07/2006, 13h17

oui, ça marchera aussi ainsi

**epona1** · 12/07/2006, 13h58

Snif, encore raté.
Voici tout le code de la page (après rajout...surement mal placé, non ?) :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
</head>

<body>
{width:100%;
height:100%;
text-align: center}
<img src="visuels/intro.jpg" width="1000" height="650" />
#center{
text-align:left;
margin:0 auto;
width:1000px;
height:650px;
}
</body>
</html>

**masu** · 12/07/2006, 14h04

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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
/* ceci est une feuille de style css */
#content {
	position:absolute;
	top: 50%;
	left: 50%;
	margin-left: -500px;/*- la 1/2 de la largeur*/
	margin-top: -325px;/*- la 1/2 de la hauteur*/
	width: 1000px;
	height: 650px;
	background: #0EE;
}
</style>
</head>

<body>
<!-- ici ce trouve ton code html qui apparait a l'ecran -->
<div id="content">
<img src="visuels/intro.jpg" width="1000" height="650" />
</div>
</body>
</html>

edit: effectivement Bobybx j'avais oublier d'adapter les valeurs a l'images

**Bobybx** · 12/07/2006, 14h04

je rejoins le code de masu

Il ne reste plus qu'à adapter la taille du div à la taille de ton image

**masu** · 12/07/2006, 14h09

Envoyé par maximenet

euhhh je pense avoir une meilleur méthode en faite
et là hop tout est centrer

logiquement

ca ne centre rien de facon verticale ton code si ?

**masu** · 12/07/2006, 14h13

si c'est seulement pour centrer une image alors tu peu utiliser simplement ca:

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
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
/* ceci est une feuille de style css */
body {
        background: url(visuels/intro.jpg) no-repeat center center;
}
</style>
</head>
 
<body>
 
</body>
</html>

**epona1** · 12/07/2006, 14h21

Ma page (et son image de contenu) font 1000 x 650 px

avec le code ci-après (copié intégralement tel quel), la page va se coller en bas à gauche de la fenêtre du navigateur

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
/* ceci est une feuille de style css */
#content {
position:absolute;
top: 50%;
left: 50%;
margin-left: -100px;/*- la 1/2 de la largeur*/
margin-top: -150px;/*- la 1/2 de la hauteur*/
width: 200px;
height: 300px;
background: #0EE;
}
</style>
</head>

<body>
<div id="content">
<img src="visuels/intro.jpg" width="1000" height="650" />
</div>
</body>
</html>