[Résolu]Probleme de centrage du site

Bonjour,
je sais que je suis la énième personne à poser la même question, et je m'en excuse par avance...
J'essai de centrer mon site, mais sans succès, j'ai essayé le
text align center, le width 50%, etc ... mais mon site reste toujours aligné à gauche

Dans mon css j'ai pourtant mis la largeur de mon site, là je seche.
Alors si quelqu'un peut regarder ça de plus près
Merci d'avance

voici le site web
Modifié par richo (24 Oct 2007 - 03:42)

hi,

je n'ai regardé qu'en surface, mais c'est curieux, tu as ton div conteneur #general_fond qui a pour caractéristique css float:left....

sinon essaie ca :

position:absolute;
width:<la_taille_de_ton_conteneur>;
left:50%;
margin-left:-<la_moitié_de_taille_de_ton_conteneur>;

ca marche systématiquement

Oups, c'est mal parti avec ça:

BODY { 
margin : 0 0 0 0;
background-color : #f5f3f4;
color : #000000;
[b]width: 1051px;[/b]
background-image:url(../images/fond.gif);
background-repeat:repeat-y;
}

Un peu de lecture ne te fera pas de tort:
Centrer les éléments ou un site web en CSS

Benjamin D.C. a écrit :
Oups, c'est mal parti avec ça (...)

Ça et l'utilisation maladroite de float: left sur des conteneurs appelés à être centrés horizontalement.
Il y a effectivement pas mal de choses à revoir.

Merci NikOo, merci Benjamin, et merci Florent.
Grace a vous, j'ai compris mes erreurs, l'utilisation du float left été plus que mal a droite
Ma principale erreur, été de ne pas avoir séparé le fond du contenu.

Je suis passé de ca :

BODY { 
margin : 0 0 0 0;
background-color : #f5f3f4;
color : #000000;
width: 1051px;
background-image:url(../images/fond.gif);
background-repeat:repeat-y;
}

#general_fond{
float :left;
} 

a ca :

BODY { 
position: relative;
margin : 0 0 0 0;
color : #000000;
margin-left: auto;
margin-right: auto;
width: 1051px;
} 

#general_fond{
width: 1051px;
background-image:url(../images/fond.gif);
background-repeat:repeat-y;
} 

ce qui est quand meme plus logique

Parcontre, je viens de me rendre compte que l'image de fond n'apparait plus sous FF. Avez vous une idée du pourquoi ?
Modifié par richo (24 Oct 2007 - 03:54)

richo a écrit :
ce qui est quand meme plus logique

Pas beaucoup plus, à vrai dire. Tu centres body via des marges automatiques, or body est un élément parfois difficile à styler. Vu que tu as un conteneur global (div#general_fond), autant lui appliquer directement la largeur et les marges automatiques, sans passer par body.

On ferait donc plutôt quelque chose de ce genre:

body {
	margin : 0;
	padding: 0;
	color : black;
	background: white;
} 
#general_fond {
	width: 980px; /* 1051px de large, c'est dommage... */
	margin: 0 auto;
	background: url(../images/fond.gif) repeat-y center top;
}

richo a écrit :
Parcontre, je viens de me rendre compte que l'image de fond n'apparait plus sous FF. Avez vous une idée du pourquoi ?

Sans doute parce que div#general_fond a une hauteur de zéro pixels. Probablement un problème de dépassement des flottants (nota: c'est un comportement standard, c'est le rendu dans IE qui est bugué ici).
Modifié par Florent V. (24 Oct 2007 - 09:47)

Alors là chapeau bas Florent,
Tu as une maitrise parfaite du css.
j'ai apporté toutes les modifs préconisé a part le width 980px, car ca me décale le contenu vers la droite par rapport au fond.
Et effectivement on a le resultat souhaité, je ne m'amuserai plus a vouloir centrer un element graphique par le body

a écrit :
richo a écrit :
Parcontre, je viens de me rendre compte que l'image de fond n'apparait plus sous FF. Avez vous une idée du pourquoi ?

Florent V. a écrit :

Probablement un problème de dépassement des flottants

Effectivement j'avais

#global{
float:left;
padding-left:61px;
} 

j'ai donc viré le float left, laissant apparaitre ainsi le fond

J'ai encore beaucoup de choses a apprendre, mais grace a vous je m'ameliore petit a petit