Centrer du contenu dans une page

Le
elia
Bonjour,

Je souhaiterais centrer du contenu dans une page . Impossible de faire
apparaitre le "background-color"?

J'ai donc centré un "container" dans le lequel j'ai 3 colonnes. La
couleur du fond du "container" #FFFFFF n'apparait pas?

Mon css est :

body {padding:0; margin:0; background-color:#990000;}
#container { text-align: left; width: 810px; margin: 0 auto;
background-color:#FFFFFF;}
#col_one {float:left; width:100px;background-color:#555555;}
#col_two {float:left; width:500px;background-color:#CC0000;}
#col_tree {float:left;width:200p;background-color:#FF9900;}

ma page:

<body>
<div id="container">
<div id="col_one">ghjfgjf<br /></div>
<div id="col_two">ghjfgjf<br />fgjfg<br /></div>
<div id="col_tree">hjf<br />hjf<br />hjf<br /></div>
</div>
</body>

Merci, Pascal
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
docanski
Le #22086711
Eleveurs et agriculteurs polluent toujours la Bretagne et elia nous
narre ce qui suit en ce 26/11/2007 11:03 :
Bonjour,



Bonjour,

Je souhaiterais centrer du contenu dans une page . Impossible de faire
apparaitre le "background-color"?



Ainsi, ça irait déjà mieux :

<style type="text/css">
body {padding:0; margin:0; background-color:#990000;}
#container { text-align: left; width: 810px; margin: auto;padding:5px;
background-color:#FFFFFF;display:table}
#col_one {float:left; width:100px;background-color:#555555;}
#col_two {float:left; width:500px;background-color:#CC0000;}
#col_tree {float:left;width:200px;background-color:#FF9900;}
</style>

L'interprétation du padding est toutefois différente entre MSIE, Opera
et Firefox.
Merci, Pascal



Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor/free.fr/
elia
Le #22086701
et bien! super merci, c'est exactement ce "display:table;" qu'il me
fallait et que je n'avais pas trouvé dans mes sources! Merci encore!,
pascal
Olivier Masson
Le #22086691
docanski a écrit :

#container { text-align: left; width: 810px; margin: auto;padding:5px;
background-color:#FFFFFF;display:table}



Bof. On peut faire autrement donc autant éviter d'utiliser display:
table lorsque ce n'en est pas une.

.clean { display: block; clear: both; }
et <span class="clean"></span> avant la fermeture du container.

(span pour rester neutre, mais on peut utiliser br et ne plus mettre
block dans le style, puis br est en block.)

De plus, un text-align: center sera utile pour centrer sur IE.
Laurent vilday
Le #22086681
elia a écrit :
Bonjour,

Je souhaiterais centrer du contenu dans une page . Impossible de faire
apparaitre le "background-color"?

J'ai donc centré un "container" dans le lequel j'ai 3 colonnes. La
couleur du fond du "container" #FFFFFF n'apparait pas?

Mon css est :

body {padding:0; margin:0; background-color:#990000;}
#container { text-align: left; width: 810px; margin: 0 auto;
background-color:#FFFFFF;}
#col_one {float:left; width:100px;background-color:#555555;}
#col_two {float:left; width:500px;background-color:#CC0000;}
#col_tree {float:left;width:200p;background-color:#FF9900;}

ma page:

<body>
<div id="container">
<div id="col_one">ghjfgjf<br /></div>
<div id="col_two">ghjfgjf<br />fgjfg<br /></div>
<div id="col_tree">hjf<br />hjf<br />hjf<br /></div>
</div>
</body>



Tous les éléments à l'intérieur étant flottants il suffit d'un banal
overflow:auto sur #container pour que la hauteur des flottants internes
soient considérés dans le calcul de la hauteur du #container.
Puisqu'aucune height n'est appliquée à #container, ça ne crée pas de
scrollbars, ça s'adapte au contenu flottant.

Tésté sur (win) Fx2 et 3b1, safari 3b1, Op9, IE6 et IE7.

--
laurent
docanski
Le #22086651
Eleveurs et agriculteurs polluent toujours la Bretagne et Olivier Masson
nous narre ce qui suit en ce 26/11/2007 14:53 :

Bof. On peut faire autrement donc autant éviter d'utiliser display:
table lorsque ce n'en est pas une.

..clean { display: block; clear: both; }
et <span class="clean"></span> avant la fermeture du container.



Bof. Si Firefox ne bronche pas, ça modifie l'affichage au niveau de la
marge blanche aussi bien sous MSIE que sous Opera. Opera ajoute quelques
pixels à droite et MSIE les ajoute en dessous.
Pas très homogène, comme résultat.
La solution de Laurent est plus élégante.
Pascal jugera de ce qui lui convient le mieux, après tout.
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor/free.fr/
docanski
Le #22086641
Eleveurs et agriculteurs polluent toujours la Bretagne et Laurent vilday
nous narre ce qui suit en ce 26/11/2007 15:15 :

Tous les éléments à l'intérieur étant flottants il suffit d'un banal
overflow:auto sur #container pour que la hauteur des flottants internes
soient considérés dans le calcul de la hauteur du #container.



C'est tout bon, en effet.
Ce qui est toutefois curieux, c'est l'interprétation du padding (celui
que j'ai ajouté) chez FF et Opera par rapport à MSIE : le 2 premiers
affichent 5 pixels à gauche et 10 pixels (à vue de nez) à droite ...
alors que l'espace restant n'est censé être que de 10 px.
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor/free.fr/
Olivier Masson
Le #22086591
docanski a écrit :

Bof. Si Firefox ne bronche pas, ça modifie l'affichage au niveau de la
marge blanche aussi bien sous MSIE que sous Opera. Opera ajoute quelques
pixels à droite et MSIE les ajoute en dessous.
Pas très homogène, comme résultat.
La solution de Laurent est plus élégante.
Pascal jugera de ce qui lui convient le mieux, après tout.



Bof, ça vaut mieux que ta solution c'est sûr ;)
C'est une soluce classique et ça dépend de ce que l'on souhaite faire.
Aucune diff d'affichage chez moi (IE6,7, Op9, FF2).
Publicité
Poster une réponse
Anonyme