28220 sujets

CSS et mise en forme, CSS3

[Résolu] Probleme centrage page web

Bonjour,
Mon site est maxter007.free.fr.Je ne comprend pas pourquoi sous IE il me centre bien mon site alors que sous firefox ca le met a gauche de la page.Comment le mettre au milieu de la page sur les 2 navigateurs.
Pouvez-vous m'aider s'il vous plait à résoudre ce probleme ?
Modifié par maxter007 (24 Oct 2005 - 11:56)
Bonjour maxter007,

Pour centrer tout ton site, tu peux utiliser les marges négatives.

Dans ta feuille de styles :
#conteneur {
	  position: absolute;
	  width: 760px;
	  left: 50%;
	  margin-left: -380px;	/* mettre la moitié de width */
}

Dans ta page :
<div id="conteneur">
  <!-- le contenu de ton site -->
</div>

Ce div conteneur sera centré horizontalement dans la page. Smiley cligne
Anthony j'ai essayé de rajouter ce que tu m'a dit mais ca ne marche pas
mon code CSS est
body {
background-color: #66CCFF;
text-align: center;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
Je vais essayé ta solution Balu
Modifié par maxter007 (18 Sep 2005 - 00:31)
Bonjour,

maxter007 : merci de modifier ton titre pour qu'il soit plus explicite que "Probleme CSS avec Firefox", qui ne servira pas à grand-chose pour d'autres utilisateurs.

Pour ce problème de centrage, commencer par :
- la FAQ du forum
- qui t'aurait immédiatement fourni ce lien : "Centrer les éléments ou un site web en CSS" (la 1ere partie te montrera comment corriger l'erreur du code cité dans ton message précédent).

balu : éviter le centrage par les marges négatives, qui provoque un rognage sans solution de la partie gauche du contenu si la largeur d'affichage est inférieure au minimim requis par le site.
Modifié par Laurent Denis (18 Sep 2005 - 05:07)
Laurent Denis a écrit :
éviter le centrage par les marges négatives, qui provoque un rognage sans solution de la partie gauche du contenu si la largeur d'affichage est inférieure au minimim requis par le site.
Je présume que vous voulez parler d'un défilement horizontal.

Si oui, la solution des marges automatiques peut aussi provoquer un défilement horizontal pour la même raison que vous avez dit car la largeur est fixée en pixels.
Modifié par balu (18 Sep 2005 - 05:44)
balu a écrit :

Je présume que vous voulez parler d'un défilement horizontal.

Si oui, la solution des marges automatiques peut aussi provoquer un défilement horizontal pour la même raison que vous avez dit car la largeur est fixée en pixels.

Non. On ne parle pas du défilement horizontal mais d'un tout autre phénomène. Le centrage par marge négative provoque la disparition irrécupérable de la partie gauche du contenu lorsque la largeur de ce contenu dépasse la largeur de la fenêtre. Il ne s'agit pas d'un banal défilement horizontal tout à fait normal qui survient lorsque la largeur de la page dépasse la largeur de la fenêtre.

Il n'y a qu'à faire le test avec ton exemple :

#conteneur {
	position: absolute;
	width: 760px;
	left: 50%;
	margin-left: -380px; /* mettre la moitié de width */
}

Si la fenêtre est plus petite que 760px, il y a rognage.
Modifié par Stephan (18 Sep 2005 - 06:38)
Oui, je comprend maintenant ce que vous vouliez dire par rognage. Merci.
Modifié par balu (18 Sep 2005 - 06:49)
maxter007 a écrit :
Bonjour,
Mon site est maxter007.free.fr.Je ne comprend pas pourquoi sous IE il me centre bien mon site alors que sous firefox ca le met a gauche de la page.Comment le mettre au milieu de la page sur les 2 navigateurs.
Pouvez-vous m'aider s'il vous plait à résoudre ce probleme ?
Sujet clos
Aller à