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

**masu** · 12/07/2006, 15h15

Envoyé par epona1

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.

Ce qui sous entendait pour moi que epona1 souhaitait aussi un centrage vertical.

**epona1** · 12/07/2006, 15h19

Avec ce code, le centrage est horizontal et vertical.

Par contre (cf nouvelle discussion) je n'arrive plus à mettre de zone réactive sur l'image de fond. Et si j'insère une nouvelle image, elle se ballade en haut de la fenêtre

**maximenet** · 12/07/2006, 15h28

autant pour moi alors, j'avais pas compris

**epona1** · 12/07/2006, 21h38

Pour ne pas mourir idiote, j'ai tout viré, recréé une page avec le code de Masu pour centrer la page (et pas seulement l'image), en supprimant juste la ligne de mon image qui venait en double. Et là tout marche comme sur des roulettes !

pour info :

<!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>
<div id="content">
<img src="visuels/intro.jpg" width="1000" height="650" />
</div>
</body>
</html>

**maximenet** · 13/07/2006, 09h44

le problème du position absolute, c'est que tes éléments interne à celui là ne dépenderont pas de cet élément pour le positionnement, ce qui peut être contraignant je pense

comment centrer la page

HTML

Vue hybride

Discussions similaires

Partager

Partager