Centrer un site en css?????

tryan · 14 Mars 2009

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

tonguide · 14 Mars 2009

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.

SpeedAirMan · 14 Mars 2009

Le text-align est superflu (pas indispensable).

Voici le minimum :

HTML

Code:

<div id="conteneur">ici ton contenu</div>

CSS

Code:

#conteneur {width:960px; margin:0 auto;}

(à adapter selon les besoins)

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

tonguide · 14 Mars 2009

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 */
}

tryan · 14 Mars 2009

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:

<!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>

tonguide · 14 Mars 2009

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;

tryan · 14 Mars 2009

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 ^^.

Audiofeeline · 14 Mars 2009

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: :mrgreen: :mrgreen:

UsagiYojimbo · 14 Mars 2009

Audiofeeline a dit:
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: :mrgreen: :mrgreen:

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).

tryan · 14 Mars 2009

Audiofeeline a dit:
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: :mrgreen: :mrgreen:

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 :x .... 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 :x ...sa m'énerve ^^. Je ne vois pas comment faire outre le faite de mettre une marge négative à mon contenu :?: Saloperie de CSS ...

Audiofeeline · 14 Mars 2009

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

Code:

<div id="tonsite">TOUT TON CODE</div>

Code:

#tonsite{margin:0 auto 0 auto;width:800px;}

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

tonguide · 14 Mars 2009

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".

Audiofeeline · 14 Mars 2009

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

tryan · 14 Mars 2009

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

.

Merki, merki ^^.

Audiofeeline · 14 Mars 2009

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!

tonguide · 14 Mars 2009

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

Merki, merki ^^.

Soit dit en passant, ce qu'il a dit a été dis au moins 3 fois au dessus lol