comment centrer la page

Version imprimable

Voir 40 message(s) de cette discussion en une page

12/07/2006, 00h28
epona1

comment centrer la page

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.

Ca marche avec le system des marges negatives

Code:

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:

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

12/07/2006, 10h49
epona1

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

Tu fais ta page html ainsi :
Code:

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:

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

12/07/2006, 11h28
epona1

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

Voilà le html avec le css incorporé

Code:

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

12/07/2006, 11h57
epona1

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
12/07/2006, 12h42
Bobybx

Le code donné marche, c'est certain!

Quel est ton code exact ??

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

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:

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

12/07/2006, 13h17
Bobybx

oui, ça marchera aussi ainsi :)
12/07/2006, 13h58
epona1

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>

Code:

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

12/07/2006, 14h04
Bobybx

je rejoins le code de masu :)

Il ne reste plus qu'à adapter la taille du div à la taille de ton image
12/07/2006, 14h09
masu

Citation:

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 ?

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

Code:

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>

12/07/2006, 14h21
epona1

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>
12/07/2006, 14h24
epona1

Sorry. La page va se coller en bas à droite de la fenêtre
12/07/2006, 14h28
Bobybx

Tu veux faire quoi sur cette page?? Juste centrer une image horizontalement et verticalement?
12/07/2006, 14h37
epona1

Alleluia !!!

Merci mille fois. ça marche !!!
12/07/2006, 14h39
epona1

Alleluia !!! ça marche
Merci mille fois

Voir 40 message(s) de cette discussion en une page