28173 sujets

CSS et mise en forme, CSS3

[résolu]Centrer un site en position absolue

Bonsoir

Je voulais savoir s'il était possible de centrer un site en position absolue au lieu d'utiliser le margin: auto. Cela m'aiderais pour positionner mes autres blocs.

Merci
Modifié par veust80 (10 Jun 2007 - 23:49)
Bonjour,

Si ta page a un width défini, c'est possible

top: ou tu veux:
left: 50%;
margin-left: - (signe moins) la moitié du width de ta page en px ou%


Mais pourquoi en absolute la page?
ghost a écrit :
Si ta page a un width défini, c'est possible

Mais problématique si la largeur de la fenêtre du navigateur est plus petite que la largeur de la page. En général, on évitera donc cette technique de centrage (idem pour le centrage vertical).

veust80 a écrit :
Cela m'aiderais pour positionner mes autres blocs.

Tiens, ça c'est étonnant. Smiley confuse
Si tes autres blocs sont des enfants ou descendants de ton bloc « page » et que tu veux les positionner en absolu par rapport à ce bloc, il suffit d'utiliser le positionnement relatif. Par exemple :
div#global {
	position: relative;
	width: 750px;
	margin: 20px auto;
}

Modifié par Florent V. (10 Jun 2007 - 22:53)
En fait je me suis peut etre pas bien exprimée, la page en elle même ne me gène pas avec le margin: auto. Je que je veux faire, c'est mettre un conteneur qui engloberait toute ma page et le placer en position absolue. Ceci afin d'aligner mes différents menus , eux aussi, en position absolue par rapport à ce conteneur. Je me dis que c'est le meilleur moyen pour éviter les problèmes de mise en page avec les différents navigateurs. En effet, sur les deux sites que je viens de créer, j'ai plein de soucis de placement de mes menus selon les navigateurs utilisés. Voir exemple. Ce soucis, dans l'exemple, a lieu sous ie6 alors que la page sort très bien sous ie7 et firefox2
re,

A priori tes sites souffrent du bug 3px jog pour ie6, le positionnement en absolute de ton menu est une des solutions, mais pour cela il te suffit de positionner ton conteneur en relative, ce qui te permet entre autre de pouvoir le centrer avec margin-auto.

lien
Modifié par ghost (10 Jun 2007 - 23:10)
Ok

Si je comprends bien, je peux placer mon body en position relative avec un margin:auto pour le centrer puis aligner mes différents blocs dans le body. Un code de ce type est donc réalisable :
body {position: relative;
                   width: 760px;
                   margin: auto}


Je voulais aussi savoir quel était le bug 3px jog ?

En tout cas merci pour ton aide, ça m'ouvre d'autres perspectives pour mes mises en page.
veust80 a écrit :
Un code de ce type est donc réalisable :
body {position: relative;
                   width: 760px;
                   margin: auto}

En théorie, oui. En pratique, il est préférable de passer par un conteneur global (une div avec un identifiant quelconque... "global", "page", "schmilblik"...) qui viendra contenir tous les autres éléments de la page :
<body>
<div id="global">
	...
</div><!-- fin de div#global -->
</body>

J'ai expliqué récemment le pourquoi du comment dans un sujet que j'ai la flemme de retrouver là tout de suite. Mais, sur ce coup là, on peut me croire sur parole. Smiley lol

veust80 a écrit :
Je voulais aussi savoir quel était le bug 3px jog ?

Moteur de recherche (type Google, ou recherche sur le forum) > Three Pixel Jog > Lire la documentation.
Bonne lecture. Smiley smile
Florent V. a écrit :

Mais problématique si la largeur de la fenêtre du navigateur est plus petite que la largeur de la page.




Smiley lol Non, pas problématique ! Catastrophique conviendrait mieux.

Technique à condamner de manière radicale.


Ou pour le dire autrement : à Ghost > ne jamais, jamais, jamais proposer ce type de solution... ... Il n'y a pas pire.
Sujet clos
Aller à