[W3C] centrer et réduire avec un div

Version imprimable

05/09/2006, 10h31
trotters213

[W3C] centrer et réduire avec un div

:salut: à tous.
Je souhaite faire un site respectant les normes du W3C donc pas de tableau pour centrer mon document. J'utilise donc une div.
Je suis allé voir dans la FAQ mais lorsque je l'utilise mon contenu n'est pas centré mais collé à gauche (à cause de text-align:left) donc soit il y a une erreur dans la FAQ soit c'est moi qui utilise mal quelque chose.
Autre problème : dans ma CSS j'utilise l'attribut width sur ma div afin de réduire le cadre à 756 pixels mais rien ne se passe non plus.
Que faire?
05/09/2006, 10h41
trotters213

Alors pour la largeur c'est simplement que j'avais oublié d'indiquer si c'était en pourcentage ou en pixel par contre pour la FAQ je sais toujours pas si c'est moi qui me trompe ou si c'est celui qui à créer le sujet de la FAQ.
05/09/2006, 11h20
Invité

Tu pourrais mettre ton code s'il te plait ?

doc HTML :

Code:

1
2
3
<div id="centrer">
....
</div>

doc CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body{
	font-family: Arial,sans-serif;
	color: #333333;
	line-height: 1.166;	
    margin: 0px; 
    padding: 0px;
    text-align: center;
}
 
#centrer 
{
	background-color:#ededed;
	margin-left: auto;
    margin-right: auto;
    width: 756px;
    text-align: center;
}

05/09/2006, 12h57
Invité

Et qu'est-ce qui ne fonctionne pas ? C'est ok chez moi. Tu n'as pas oublié de mettre le lien vers ta page css entre les balises head ? :

Code:

<link rel="stylesheet" type="text/css" href="page.css"/>

Ton texte est a gauche dans ton bloc mais tu veux que ton bloc soit centré cest ca ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 body { font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; } #centrer { background-color:#ededed; margin-left: auto; margin-right: auto; width: 756px; text-align: left; }
et :

Code:

<div id="centrer" align="center">

Non ?

05/09/2006, 13h40
Invité

Non. Avec le code qu'il a, le bloc est centré et le texte l'est aussi. Je ne comprends pas la question

babastutz : La question est la suivante :
Dans la FAQ il y a marqué ceci :
Citation:
Comment centrer horizontalement des éléments en CSS
auteur :regbegpower

Structure du code (X)HTML :
Code:

1 2 3 4 5 6 <body> <div id="centrer"> </div> </body>
Le CSS est le suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 body { margin: 0px; padding: 0px; text-align: center; /* pour résoudre le bug de centrage de IE */ } #centrer { margin-left: auto; margin-right: auto; width: ...; text-align: left; /* pour résoudre le bug de centrage de IE */
}
or si je fais ceci mon texte est aligné à gauche et non au centre comme indiqué dans le titre.
Ce qui amène ma question : est-ce moi qui fait mal quelque chose ou est-ce que le rédacteur de cette astuce c'est trompé et qu'il voulait mettre text-align: center; (car en mettant text-align:center ça fonctionne) ?

Elwyn : ça me parait vraiment bizarre de mettre un attribut à une valeur dans le CSS et à une autre valeur dans le code HTML (d'ailleurs le W3C préconise que tous les attributs soit dans le CSS si je ne me trompe pas)

05/09/2006, 14h27
Invité

Je pense qu'il s'est trompé car je ne m'y prends pas comme ça non plus. J'aurais mis text-align:center
05/09/2006, 14h33
MasterOfChakhaL

A mon avis, le but de cette astuce est de centrer le bloc conteneur.
Le text-align:left me semble traduire l'habitude qu'on a d'aligner le texte à gauche (dans un bloc qui soit centré ou pas)

Peut-être était-ce ambigüe mais à mon avis, le rédacteur a bien écrit ce qu'il voulait faire...

Le plus simple est encore de lui demander directement....
05/09/2006, 14h44
fallais

Citation:

Envoyé par MasterOfChakhaL

A mon avis, le but de cette astuce est de centrer le bloc conteneur.

Merci :D :D

Citation:

Envoyé par trotters213

Ce qui amène ma question : est-ce moi qui fait mal quelque chose ou est-ce que le rédacteur de cette astuce c'est trompé et qu'il voulait mettre text-align: center; (car en mettant text-align:center ça fonctionne) ?

Oui il c'est trompé ...
05/09/2006, 15h24
masu

Il n'y a pas de probleme dans la faq.
Le but etant que le block soit centré dans la pasge mais pas le texte a l'intérieur du block.

le text-align:center du body et le text-align:right du div son la pour des raison de compatibilité car IE 5.5 et inférieur ne comprennent pas le margin auto.
05/09/2006, 16h02
trotters213

Je pense que vous avez raison masu et MasterOfChakhaL.
C'était simplement une ambigüité.
Tout ça pour ça...:D
Merci à tous.