Centrer un site en css?????

**le Sam Mar 14, 2009 14:03**

Bonjour,
Je rencontre un petit soucis pour centrer un design en css. J'ai bien testé différente façon dont le margin:auto; sur le body ou sur mon conteneur mais sans succès. Mon design reste désespérément collé à gauche.
Un margin-left + margin-right règle mon soucis uniquement sur les même résolution d'écran que moi, donc à éviter!
Mon teste se trouve ici : http://creer.mon.site.free.fr/
La feuille de style ici : http://creer.mon.site.free.fr/img/style1.css

Je prend toutes suggestions ^^
Merci

**le Sam Mar 14, 2009 14:23**

Tu fais un "text-align:center;" sur le "body" (pour IE).

Ensuite, sur le div qui englobe tout ton site, tu fais un "margin:0 auto;" (pour les autres) ET un "text-align:left;" (pour replacer ton texte à gauche par défaut)

Sachant que le premier div doit avoir un "width" (largeur) définit évidemment.

**le Sam Mar 14, 2009 14:31**

Le text-align est superflu (pas indispensable).

Voici le minimum :

HTML

Code: Tout sélectionner: <div id="conteneur">ici ton contenu</div>

CSS

Code: Tout sélectionner: #conteneur {width:960px; margin:0 auto;}

(à adapter selon les besoins)

(ça résume le post / la réponse précédent(e) ;-)

)

**le Sam Mar 14, 2009 15:04**

Comme précisé dans la parenthèse, il l'est pour IE, qui est encore très utilisé.

Sans ça, sur tous les navigateurs ça marchera, SAUF sur IE6.

Donc je confirme, il est indispensable

http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou- ... n-CSS.html

Donc :

body {
margin: 0; /* pour éviter les marges */
text-align: center; /* pour corriger le bug de centrage IE */
}
Il faudra ensuite rétablir l'alignement texte dans #global, ce qui donne :

#global {
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left; /* on rétablit l'alignement normal du texte */
}

**le Sam Mar 14, 2009 15:12**

Merci mais ... sa ne fonctionne pas quelque soit la réponse^^. Mon design reste toujours collé à gauche.
Pour ceux qui veulent trouver une soluce en local et qui on du temps à perdre, ci joint mon code:

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr"> <head> <style type="text/css"> body{ background :#5FCBE7 url(bg.png) repeat ; } #conteneur { position: absolute; margin: auto; width: 1000px; padding:5px; height: auto; background-color: #FBFBFB; } #menu { float:left; padding:5px; width: 200px; height: auto; background-color: #EEEEEE; text-align: left; margin:5px; } #contenu { float:right; width: 755px; height: auto; border: 1px solid #6699CC; background-color: #F5F8FC; text-align: left; padding: 5px; margin:5px; } #header{ padding:5px; width:auto; height: 240px; background :#5FCBE7 url(page_top.jpg) no-repeat; border: 1px solid #FFF; margin:5px; color: #FFF; font-size: 55px; } .titre_menu { color: #FFF; padding:3px; border: 1px solid #000; background: #000; font-weight: bold; } a.menu { display: block; color: #000; text-decoration: none; padding:3px;text-decoration:none;} a.menu:hover { display: block; color: #000; background: #ddddff; padding:3px;text-decoration:none;} h1{ font-size: 25px; color: #336699; margin-left : 15px; border-bottom : 1px solid #336699; } h2{ font-size: 20px; color: #336699; margin-left : 15px; border-bottom : 1px solid #336699; } h3{ font-size: 15px; color: #336699; margin-left : 15px; border-bottom : 1px solid #336699; } ul { margin: 20px; padding : 5px; list-style : none; } li{ display : list-item; list-style-image : url('fleche-verte.png'); } </style> <title>teste.css</title> </head> <body> <div id="conteneur"> <div id="header">Mon super site XHTML/CSS</div> <div id="menu"> <div class="titre_menu">Navigation</div> <a href="#" class="menu">Lien</a> <a href="#" class="menu">Lien</a> <a href="#" class="menu">Lien</a> <a href="#" class="menu">Lien</a> <div class="titre_menu">Navigation 2</div> <a href="#" class="menu">Lien</a> <a href="#" class="menu">Lien</a> <a href="#" class="menu">Lien</a> <a href="#" class="menu">Lien</a> </div> <div id="contenu"> <h1>Titre niveau 1</h1> <p>Paragraphe 1</p> <h2>Titre niveau 2</h2> <p>Paragraphe 2</p> <h3>Titre niveau 3</h3> <ul> <li>hhh</li> <li>kkk</li> </ul> </div> </div> </body> </html>

**le Sam Mar 14, 2009 15:15**

Il n'y a aucun doute sur le fonctionnement.

Seulement, ton "position: absolute" ... à éviter, il sera forcement collé en haut à gauche quoique tu fasses.

Donc tu refais ce que j'ai mis au dessus, et tu retires le position:absolute;

**le Sam Mar 14, 2009 15:30**

Oui, je me suis rendu compte également que mon position:absolute sur mon conteneur était la cause de mon problème.
Bon, maintenant que mon design est centré, et ayant enlevé mon position:absolute de mon conteneur, mon menu et mon contenu dépasse de mon conteneur :lol:

.. y m'énerve ce truc ^^.

**le Sam Mar 14, 2009 15:50**

Arrêtez de coder POUR Internet Explorer, quand les gens verront qu'Internet est bancale avec ce navigateur ils en choisiront un autre ou Microsoft fera des efforts... :mrgreen:

**le Sam Mar 14, 2009 15:56**

Audiofeeline a écrit:Arrêtez de coder POUR Internet Explorer, quand les gens verront qu'Internet est bancale avec ce navigateur ils en choisiront un autre ou Microsoft fera des efforts...

Très mauvaise appréciation du truc je pense. L'objectif quand on fait un site est de toucher le plus grand nombre. Va expliquer à un client que si son navigateur n'affiche pas les sites correctement, c'est qu'il doit être sur IE et qu'il devrait en changer. Beaucoup ne connaissent même pas le nom du navigateur qu'ils utilisent. En tant que prestataire, le site doit s'adapter à un maximum de navigateurs (sans non plus tomber dans le délire et proposer des sites 100% fonctionnelles sur IE4.), ce n'est pas à l'utilisateur de s'adapter au site.

IE 6 est certes une belle prise de tête à ce niveau, mais on doit faire avec. Les test doivent donc se faire AVEC lui, mais aussi avec FF, Chrome, Safari, etc (incluant plusieurs versions pour chacun).

**le Sam Mar 14, 2009 16:03**

Audiofeeline a écrit:Arrêtez de coder POUR Internet Explorer, quand les gens verront qu'Internet est bancale avec ce navigateur ils en choisiront un autre ou Microsoft fera des efforts...

Malheureusement les erreurs que je rencontre sur mon css est sous IE et FF :lol:

...

Bon, le faite que mon contenue et que mon menu soit en float left et right fait qu'ils sortent tout 2 de mon conteneur

.... Une fois retiré c'est 2 float, tout se retrouve bien englobé par mon conteneur mais ... du coup mon contenu passe en dessous de mon menu

...sa m'énerve ^^. Je ne vois pas comment faire outre le faite de mettre une marge négative à mon contenu :?:

Saloperie de CSS ...

**le Sam Mar 14, 2009 16:12**

Il suffit de mettre l'ensemble de ton site dans un conteneur div :

Code: Tout sélectionner: <div id="tonsite">TOUT TON CODE</div>

Code: Tout sélectionner: #tonsite{margin:0 auto 0 auto;width:800px;}

En tout cas ça m'a inspiré un billet sur mon WWW.

**le Sam Mar 14, 2009 16:25**

Lol, j'imagine trop le mec qui sait à peine qu'il existe autre chose que Internet Explorer se dire "Oh merde, mon navigateur respecte même pas les standards de W3C, et merde, faut que j'en trouve un autre".

Perso, je pense plutôt qu'il va se dire "Arf, il est nul ce site, il marche pas, je vais allé voir ailleurs".

**le Sam Mar 14, 2009 16:37**

Ouais mais si les autres sites sont pareils...
Bon c'est utopique, hein?!

**le Sam Mar 14, 2009 16:41**

Ouaiiiiii, merci de vos réponses et particulièrement celle d'Audiofeeline qui met un terme à mon calvaire ..enfin

.

Merki, merki ^^.

**le Sam Mar 14, 2009 16:48**

Quand tu sais pas tu me demandes.
Et dire que je suis une bille en code...

Sur ces bonnes paroles je vais me faire un ptit GTA4 sur PS3! Avis aux amateurs!

Centrer un site en css?????

Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Re: Centrer un site en css?????

Lectures recommandées sur ce thème :

Qui est en ligne