Webmaster Hub > Centrage défectueux d'un div

Version complète: sur le forum Webmaster Hub : Centrage défectueux d'un div

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

SdT

jeudi 2 novembre 2006 à 22:57

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 :

CODE

<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

CODE

#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

jeudi 2 novembre 2006 à 23:25

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

CODE

#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é.

steph13

jeudi 2 novembre 2006 à 23:37

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

vendredi 3 novembre 2006 à 00:08

Ca fonctionne à la perfection

Merci beaucoup Topper

koto

vendredi 3 novembre 2006 à 00:37

CODE

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

vendredi 3 novembre 2006 à 10:31

De rien SdT !

Raphael

vendredi 3 novembre 2006 à 11:18

CITATION(Topper @ vendredi 3 novembre 2006, 00h25)

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

CODE

#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

vendredi 3 novembre 2006 à 11:58

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

vendredi 3 novembre 2006 à 12:01

CITATION(Topper @ vendredi 3 novembre 2006, 12h58)

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.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.