28220 sujets

CSS et mise en forme, CSS3

[Résolu] -débutant- centrer la page ?

Afin de centrer une page, pensez vous que cette methode soit bonne ?
Smiley rolleyes

dans le css : 

 body { 
        text-align: center; 
        }


" Mais comme cette propriété est héritée, tous les éléments à l’intérieur de BODY seront aussi centrés. Il faut donc rétablir l’alignement à gauche du texte pour <div id="page"> et tous les éléments qu’il contient. Ce qui nous donne : "

 #page { 
        margin-left: auto; 
        margin-right: auto; 
        text-align: left;
        }


tuto trouver ici : http://edu.ca.edu/article207.html

alors ? est ce bon ?
avez vous une meilleur methode ? Smiley lol
Modifié par lecourtier (13 Jul 2005 - 13:49)
Administrateur
Salut lecourtier et bienvenue ici Smiley smile

Pourras-tu marquer ce sujet comme résolu dès que tu en auras le temps ?
PS : tu en profiteras pour supprimer le tag [ css] que tu as mis et qui est inutile puisque nous sommes dans le salon CSS Smiley cligne
Modifié par Raphael (12 Jul 2005 - 18:41)
personnellement, pour centrer une page, j'utilise plutôt ceci:


body {
   width: [i]taille_du_body[/i];
   background: [i]éventuel background du body[/i];
   margin: 0 auto;
}


et du coup, pas de problème par la suite par rapport au centrage du texte, ici, on ne centre que le conteneur principal. (on peut bien sûr appliquer ces règles à quelconque autre élément...)
Administrateur
@Lisarael > Le body est l'ensemble du document. En centrant tout ce document, tu le centres par rapport à quoi ?
Raphael a écrit :
@Lisarael > Le body est l'ensemble du document. En centrant tout ce document, tu le centres par rapport à quoi ?


html est l'ensemble du document, Raphaël, pas body.

body est centré tout à fait normalement par rapport à son conteneur, c'est à dire html.

<edit>
Là où c'est plus amusant, c'est (pour du XHTML, et donc pas dans IE) :

html{
   width: 200px;
   background: red;
   margin: 0 auto;
}


qui marche aussi très bien Smiley lol

Allez, question : html est centré par rapport à quoi, là ? hum ? Smiley ravi
Modifié par Laurent Denis (12 Jul 2005 - 21:01)
Administrateur
Oui je savais qu'on allait me reprendre.
L'idée est que body est bien la "partie visible" du document, le corps de page.
Si celui-ci est centré, dans quoi peut-il bien être centré ? Dans une partie "non visible" ?

La partie <html> n'est pas censée être représentable graphiquement, n'est-ce pas ?
Donc je comprends tout à fait qu'elle puisse contenir des éléments (encore heureux), mais difficilement qu'elle puisse occuper un espace visible, ce qui serait le cas si body y est centré Smiley ohwell
Administrateur
Laurent Denis a écrit :
Je crois qu'il va t'amuser Smiley cligne

C'est effectivement amusant, mais ma logique en prend un sacré coup Smiley ohwell
lol

Du point de vue XHTML, l'élément xhtml a certes la particularité d'être l'élément racine du document.

Mais il ne faut pas confondre structure XHTML (les éléments) et modèle de formatage CSS (les blocs).

Du point de vue CSS, html a beau être l'élément racine de la structure, il n'est pas pour autant le bloc conteneur initial.

Le "vrai" bloc conteneur initial est établi par chaque navigateur à sa propre manière, d'ailleurs très difficile à déterminer exactement. CSS fixe en effet des règles à ce égard qui laissent pas mal de champ : voir http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

Quoi qu'il en soit, le bloc conteneur initial est un bloc situé un niveau au dessus de l'élément html, obligatoirement rectangulaire, aux dimensions de la zone de visualisation, ancré à l'origine du canevas (en haut de la page, si vous préférez).

Dans ce bloc, l'élément html a des propriétés de marges, et se comporte par ailleurs comme un bloc tout à fait commun : il a un padding, une bordure, une largeur, une hauteur, etc.

D'ailleurs, ouvrez la feuille de style par défaut des navigateurs Gecko. Celle qui est appliquée en permanence, qui fait que les paragraphes font des retours à la ligne, que les blockquotes sont indentés, que les listes ont des puces, etc.

Vous y trouverez les propriétés CSS par défaut des éléments html, head, body, title, link, style, meta, etc...

Rien ne vous empêche de les changer dans la css associée à une page web, pour faire disparaître body et afficher le contenu de head, par exemple, ou tout masquer d'un coup de html{display: none} ... Smiley ravi
j'avoue que je suis un peu dépassé par ce qui viens d'etre dit ! Smiley biggol

1) Vous me conseillez donc quelle solution ? La premiere du site, ou bien la deuxieme de Laurent ? Smiley lol

2) comment je fais pour changer le nom du sujet en " resolu " ? Smiley confus ( j'suis un peu nouveau ! )

Smiley smile
Oups, désolé, lecourtier : je croyais le problème résolu, d'où ma petite intervention hors sujet.

L'article de Raphaël que tu as vu ci-dessus te donne tout ce qu'il faut pour centrer, sans aller se perdre dans ces considérations exotiques et ces manipulations des éléments html et body Smiley cligne

Seule remarque sur les différentes méthodes de centrage rappelées par Raphaël : dans certains navigateurs, le centrage par les marges négatives rogne la partie gauche du contenu quand la largeur de l'écran n'est pas suffisante, et surtout sans qu'il soit possible de scroller.

En revanche, le centrage à l'aide des margin: 0 auto; avec le petit patch pour les anciennes versions d'IE est simple et efficace.
Modifié par Laurent Denis (13 Jul 2005 - 08:33)
donc je garderai la premiere.... ( je prefere l'efficacité ).

Comment je fais pour mettre " resolu " dans le titre ? Smiley biggrin
Administrateur
A présent que ce sujet est résolu, puis-je me permettre d'en profiter pour "élargir le débat" ?

Même si cela continue à me paraître illogique quelque part, il faut bien reconnaître que centrer directement l'élément <body> est très séduisant.

Le principal avantage est que cela permet d'éviter l'ajout de structure inutile comme un div "global" par exemple qui engloberait le document.

Ma question est donc celle-ci : est-ce que cette technique (cf ci-dessous) de centrage du <body> est conseillée en général ? Est-ce qu'elle fonctionne sur tous les navigateurs et supports ?


html {
text-align: centrer; // pour centrer sur IE5-
}
body {
width: ... ;
margin: 0 auto;
text-align: left; // pour rétablir l'alignement
}

Modifié par Raphael (14 Jul 2005 - 09:26)
Administrateur
Laurent Denis a écrit :
Cette technique ne sera pas comprise par Internet Explorer 5 et 5.5, ni par Internet Explorer 6.0 en mode Quirks.

Hmm donc autant supprimer les "text-align" dans ce cas puisqu'ils ne servent à rien.
Merci pour la réponse.
Sujet clos
Aller à