Centrer un problème de page

Ok, voyons si je peux l'expliquer. Le contenu de ma page a une largeur de 960px. Il est centré dans un autre div qui a une largeur de 1426px (#siteWrap).Centrer un problème de page

#siteWrap{ 
margin:0px auto; 
width:1426px; 
background: url(../images/bg.jpg) no-repeat ; 
}

Ce que je dois savoir est comment obtenir #siteWrap pour centrer sur une page indépendamment des résolutions d'écran. La plupart de mes visiteurs sont sur une résolution d'écran 1024x768. Lorsque je teste cette page sur cette résolution, je suis obligé de faire défiler de gauche à droite pour accéder au contenu du site.

Toute aide serait appréciée.

Source

2009-10-22 404error

Qu'est-ce qu'il y a dans #siteWrap? Est-ce juste une image de fond? Pourquoi faut-il avoir une largeur de 1426 pixels? –

Ouais c'est juste une image de fond. La raison pour laquelle je n'ai pas ajouté cette image à un corps est que le corps utilise déjà une image qui se répète. Donc, je suis un peu perdu. – 404error

Réglez simplement

largeur: 100%;

et la marge: 0 auto; devrait être mis sur votre contenu div, pas sur celui-ci.

Source

2009-10-22 17:24:36 stephenhay

Je ne pense pas que ce soit exactement ce que le PO demande. Cela entraînerait le positionnement de l'arrière-plan en haut à gauche, plutôt que d'être centré sur la page, ce qui signifierait que le contenu ne serait pas positionné au centre de l'arrière-plan. – Travis

Non, ce ne serait pas. Le div serait de 100%, avec le contenu div de 960px étant à l'intérieur de lui, centré avec marge: 0 auto ;. Comment est-ce arrivé à cette conclusion? – stephenhay

Désolé, je suppose que ce n'était pas complètement clair. Votre solution fonctionnerait, aussi longtemps que vous avez ajouté background-position: center; Sinon, par défaut, l'image d'arrière-plan sera positionnée dans le coin supérieur gauche de votre div à 100% de largeur. Sans cela, le contenu serait positionné au centre de la page, mais l'arrière-plan serait en haut à gauche, de sorte qu'ils ne s'aligneront pas correctement au milieu. – Travis

Lorsqu'un conteneur déborde horizontalement, la réaction naturelle du navigateur consiste à l'ancrer sur le côté gauche de l'écran. Je pense que devrait faire cela. Pour contourner cela, vous pouvez use Javascript to center your container element en calculant les offsets nécessaires en fonction de la résolution de l'écran/viewport.

Source

2009-10-22 17:27:37

les opérations suivantes:

#sitewrap { 
    position:absolute; 
    top:0px; 
    left:50%; 
    width:1426px; 
    margin-left:-713px; 
    background: url(../images/bg.jpg) no-repeat ; 
}

Ce sera centré mais débordera la fenêtre du navigateur.

Source

2009-10-23 23:23:49 Travis

Centrer un problème de page

Répondre

Questions connexes