Centrage défectueux d'un div

[SdT]

Bonjour à tous

J'ai récemment fait un site avec un design fixe. Je l'ai bien développé avec administration de chaque page, forum, et tout ce qui va avec

Et ce matin, je découvre que le centrage du corps ne se fait plus (alors qu'il fonctionnait avant oO).

Je me dis "ce n'est pas grave, c'est un élément du contenu qui fait tout bugguer, ça m'est déjà arrivé". Alors je mets le contenu sous commentaire et je vois que ça ne change rien :'(

XHTML :

<!-- Balises d'en-têtes -->

<div id="page">
	<div id="ph"></div>

	<div id="contenu">

		<!-- [...] -->

	</div>

	<div id="pb">
		<div id="footer">
			<p>Texte du footer</p>
		</div>
	</div>
</div>

CSS

#page
{
	width: 780px;
	margin: auto; //C'est cette ligne qui n'est pas comprise par IE
}

Ca fait depuis ce matin que je cherche, sans résultat

Donc si vous pouviez m'aider pour cette solution, ce serait sympa

PS : Je voudrais préciser que mon site doit être valide WHTML 1.0. Ce qui exclue donc les <div align="center"> ou <center>

[Topper]

Il te suffit juste de modifier du code dans ta CSS, donc pas de problèmes pour ton code XHTML !

#page {
	position: absolute;
	top:0;
	left:50%;
	margin-left:-390px;
	width: 780px;
}

Cela donne une position left de 50% à laquelle on soustrait la moitié de sa largeur ce qui fait que c'est centré.

Modifié 2 Novembre 2006 par Topper

[steph13]

Salut,

ecoute, je viens de faire un copier coller de ton code sur une page de test, et, heu, bhé ca fonctionne bien.

Voir cette page de test sous IE 6

Le truc, ton css est bien appelé dans la section head ?

Peut être une erreur s'est elle glissée la, car je viens de tester, si je sors la definition du style du head, ca ne fonctionne plus sous IE, mais bien sous FF.

Vérifie peut être de côté la.

++

Stef'

[SdT]

Ca fonctionne à la perfection

Merci beaucoup Topper

[koto]

   width: 780px;

pourquoi ça fonctionne avec 780px moi maxi ~760px sinon debordement et sinon des fois dans des float en % ça part en qu#&?!!! pour rester poli

[Topper]

De rien SdT !

Modifié 3 Novembre 2006 par Topper

[Raphael]

Il te suffit juste de modifier du code dans ta CSS, donc pas de problèmes pour ton code XHTML !

#page {
	position: absolute;
	top:0;
	left:50%;
	margin-left:-390px;
	width: 780px;
}

Cela donne une position left de 50% à laquelle on soustrait la moitié de sa largeur ce qui fait que c'est centré.

OUCH, attention à cette technique de centrage à l'aide de positionnement absolu !

Elle fut à la mode à un moment pour des raisons de compatibilité, mais au final elle est bien plus contraignante qu'autre chose (lorsqu'on réduit la taille de fenêtre, le contenu n'est plus accessible).

Si ton bloc n'est pas centré sous IE, c'est certainement soit :

- parce que tu testes sur IE5

- parce que tu testes sur IE6 et que tu es en mode quirks

Le mieux pour toi est de choisir un Doctype correct et ainsi d'éviter le mode Quirks d'IE6.

Sinon, la solution de colmatage est d'appliquer un "text-align: center" sur le body, ce qui corrigera le bug IE/quirks

Tout est expliqué ici :

http://css.alsacreations.com/Faire-une-mis...site-web-en-CSS

Bonne lecture et bonne chance.

[Topper]

En effet les deux méthodes fonctionnent.

Je ne suis moi même pas partisan du "text-align" pour un centrage de DIV car comme son nom l'indique, ça sert à centrer du texte.

Ensuite chacun fait comme il veut.

[Raphael]

Je ne suis moi même pas partisan du "text-align" pour un centrage de DIV car comme son nom l'indique, ça sert à centrer du texte.

Uniquement sur les anciens navigateurs (IE5) ou sur IE6 en mode quirks (c'est à dire lorsque le Doctype n'est pas correct).

Pour ma part, je ne me sers pas de ce text-align mais j'utilise le positionnement absolu en tout dernier recours.