28173 sujets

CSS et mise en forme, CSS3

PB centrage page IE / FF

Bonjour,

Je sais que c'est une question qui reviens souvent mais je n'ai pas encore trouver de bonnes réponse à mon problème !

Je voudrais centrer verticalement et horizontalement mon site. Sous FF le centrage horizontal fonctionne mais pas sous IE. POur le centrage vertical, je n'ai pas essayer car je n'arrive pas à faire en sorte que le site face 100% de la page.

Voici la CSS :

*
{
	padding: 0;
	margin: 0;
	border: 0;
}
	
body
{
	background-color: #3366FF;
	color: #000000;
	font: .8em/1.5em Verdana, Arial, sans-serif;
	margin-left: auto;
    margin-right: auto;
	width:80%;
	height: 100%;
	text-align: center;
}
#document
{
	margin-top: 10px;
	width: 80%;
	position: absolute;
	text-align: center;
	border: 2px solid;
	border-color: #FFFFFF;
	background-color: #6699FF;	
}
#entete
{
	height: 70px;
	line-height: 7em;
	background-color: #6699FF;
	background-position: 50% 50%;
	background-image:url(images/banniere.jpg);
	background-repeat: no-repeat;
}
#colonne1,
#colonne2
{
	position: absolute;
	top: 7em;
	width: 15%;
	background-color: #6699FF;
}
#colonne1
{
	left: 0;
}
#colonne2
{
	right: 0;

}
#corps
{
	margin: 0 15%;
	height: 650px;
	width: 70%;
	background-color: #FFF;
	overflow: auto;
}
#pied
{
	height: 20px;
	color: #FFFFFF;
	/* line-height: 3em; */
	background-color: #6699FF;
	vertical-align: middle;
}
p
{
	padding: 20px;
}


Merci de votre aide.

Damien
Bonjour et bienvenue à toi,
Penses à aller voir la FAQ qui répond à tes questions.
Tes marge latérales auto ne doivent pas être appliquées à <body> mais a ton
conteneur général pour que le centrage se fasse sur IE6, Mozilla/Firefox, Opera...
Voila qui t'aidera pour les 100% : http://forum.alsacreations.com/faq/#item57
Modifié par Hermann (17 Jun 2006 - 18:16)
Hermann a écrit :
Bonjour et bienvenue à toi,
Penses à aller voir la FAQ qui répond à tes questions.
Tes marge latérales auto ne doivent pas être appliquées à <body> mais a ton
conteneur général pour que le centrage se fasse sur IE6, Mozilla/Firefox, Opera...
Voila qui t'aidera pour les 100% : http://forum.alsacreations.com/faq/#item57



Ca ne marche pas. Ton lien je l'avais lu avant de poster et je n'y arrive pas !
tu mets ton div en position absolute avec width:80%; 80% de 80% puisque tu as deja donné un width 80% a body ton div en position:absolute se place sur le bord gauche du body et ne sera jamais centré de la sorte pour ce faire metsposition:absolute; left:50%; margin-left:-40%;
jp94 a écrit :
tu mets ton div en position absolute avec width:80%; 80% de 80% puisque tu as deja donné un width 80% a body ton div en position:absolute se place sur le bord gauche du body et ne sera jamais centré de la sorte pour ce faire metsposition:absolute; left:50%; margin-left:-40%;


OK ça marche. Mais pourquoi les largeurs sont différentes sous IE et FF ? J'ai appliqué la méthode pour que la page occupe la totalité de la hauteur du navigateur mais la page déborde très légèrement.

Une petite question : pourquoi une marge négative de 40% ??

Voici mon nouveau code:

*
{
	padding: 0;
	margin: 0;
	border: 0;
}

html {
	height:100%;
}

body
{
	background-color: #3366FF;
	color: #000000;
	width:80%;
	height:100%;
	font: .8em/1.5em Verdana, Arial, sans-serif;
	text-align: center;
}
#document
{
	left:50%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: -40%;
	margin-right: auto;
	text-align:center;
	width: 80%;
	position: absolute;
	text-align: center;
	border: 2px solid;
	border-color: #FFFFFF;
	background-color: #6699FF;
	min-height:96%;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: 100%;
}

html>body #document {
    height: 100%;
}
#entete
{
	height: 70px;
	line-height: 7em;
	background-color: #6699FF;
	background-position: 50% 50%;
	background-image:url(images/banniere.jpg);
	background-repeat: no-repeat;
}
#colonne1, #colonne2
{
	position: absolute;
	border: 0px solid;
	border-color: #000;
	top: 70px;
	width: 14%;
	background-color: #6699FF;
}
#colonne1
{
	left: 0;
}
#colonne2
{	
	right: 0;
}
#corps
{
	margin-left : 14%;
	margin-right: 16%;
	height: 600px;
	width: 70%;
	background-color: #FFF;
	overflow: auto;
	padding: 1%;
}
#pied
{
	height: 20px;
	color: #FFFFFF;
	/* line-height: 3em; */
	background-color: #6699FF;
	vertical-align: middle;
	max-height:20px;

}
p
{
	padding: 2px;
}

h2
	{
	text-align: center ;				/* Alignement du texte */
	line-height: 25px ;				/* Espacement horizontal */
	font-size: 2em ;					/* Taille du texte */
	color: #3366FF ;					/* Couleur du texte */
	border-bottom: 2px solid #3366FF ;	/* Hauteur de la ligne */
	padding-bottom: 10px;
	}


Merci de votre aide.

Damien
Modifié par Phoceen (19 Jun 2006 - 19:07)
J'ai toujours des soucis pour un centrage vertical... Après plusieurs essais j'avais réussi mais seulement pour ma résolution d'écran mais pas toutes...

J'ai essayé à peu près tout ce que j'ai trouvé sur le net mais rien à faire... Smiley bawling Smiley bawling
Raphael a écrit :

Hello,

As-tu testé toutes les 5 possibilités données ici-même ?
http://forum.alsacreations.com/faq/#item3


Non car cette technique sert à aligner verticalement dans une cellule, moi c'est tou le site que je veux centrer... Ou alors cette technique peut me permettre de centrer mon bloc #document dans le body ??
Raphael a écrit :

Tu n'as pas lu l'article de la FAQ Smiley decu

Si tu avais suivi par exemple la première piste, tu aurais obtenu ceci :
http://css.alsacreations.com/xmedia/exemples/centrer/csscentrer.htm

C'est exactement ce que tu veux, non ?


Sa ne marche pas...

avec ce code : 
body
{
	background-color: #3366FF;
	color: #000000;
	font: .8em/1.5em Verdana, Arial, sans-serif;
	text-align: center;
	overflow-x: hidden;
	overflow-y: none;
}


#document
{
	position: absolute;
	text-align: center;
	border: 2px solid;
	border-color: #FFFFFF;
	background-color: #6699FF;
	width: 96%;
	height: 98%;
	left:50%;
	top:50%;
	margin-left:-48%;
	margin-top:-49%;

}

J'obtiens ça : http://www.phoceen.net/site.jpg

La page est beaucoup trop décalée vers le haut !
Raphael a écrit :

Tu n'as pas lu l'article de la FAQ Smiley decu

Si tu avais suivi par exemple la première piste, tu aurais obtenu ceci :
http://css.alsacreations.com/xmedia/exemples/centrer/csscentrer.htm

C'est exactement ce que tu veux, non ?

Le problème avec "ceci", c'est qu'avec Opéra et à partir de IE7 et des futures versions, le site ne sera pas centré si l'utilisateur n'utilise pas la valeur par défaut pour la taille du texte, soit 100%. IE7 et Opéra, au lieu de ne changer que la taille du texte, change la taille de chaque élément. Et, tu le verras par toi-même, ton cadre se retrouvera un peu n'importe où dans ta page selon la nouvelle taille que le navigateur lui a donnée en modifiant sa taille de texte.

À cause de cela... je crois qu'il est maintenant impossible de centrer totalement un bloc et de s'assurer qu'il fonctionnera avec les utilisateurs qui n'utilisent pas 100% comme taille de texte. Vive IE7. Ainsi, si par défaut mon texte a une taille de 80% et que j'ouvre ta page, ton cadre sera à 80% du centre de ta page...

Avec un site qui n'est pas centré, bah il restera dans le coin gauche de l'écran, ce qui ne causera pas trop de problème esthétique même si ce n'est sans doute pas aussi beau qu'un site qui prend toute la largeur de la page ou la moitié.
Modifié par D@n!eL_ (02 Jul 2006 - 19:02)
Sujet clos
Aller à