[css] Comment centrer un bloc css?

yoh666 · 25 Août 2010

Bonjour,

Je suis débutant ++ en css, j'aimerai savoir si quelqu'un sur ce forum aurait la gentillesse de me guider.
Je recherche à centrer mes blocs sur une page que j'ai fait en css car j'en ai marre des tableaux html et on m'a dit le fait d'utilisé le css serait plus simple et plus propre.

Après avoir passer des heures à lire des sites qui proposent plein de techniques différentes je me suis arrété à celui ci:
http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html
Cependant ma question est simple et surement évidente pour beaucoup de monde mais je pige mal l'endroit où je doit coller les exemples, je les mets dans mon fichier style.css ou index.html?
La solution retenue est le centrage élastique adaptable à tous les formats de fenêtres.

en vous remerciant :wink:

smorge · 25 Août 2010

Ton index.html sert à placer ton contenu informatif (qui doit être accessible sans css), tu prend soin de baliser (div, p, span etc...) et d'identifier (id, class) les différents élément. Puis dans ton css, tu attribue aux éléments leurs propriétés de mise en forme (., #, a ...)

Haroeris · 25 Août 2010

Voila

Code:

#centre {
margin:0 auto;
width:960px;

}

yoh666 · 25 Août 2010

ok si je comprend bien je met

Code:

<div id="global"></div>

dans mon fichier index entre les balises head et

Code:

#centre {
margin:0 auto;
width:960px;

}

dans mon fichier style.css??

je test mais ça marche pas.

GUITEL · 25 Août 2010

Parce qu'il faut nommer le css comme la div

entre les balises head tu mets ton css

<head>
<style type="text/css">

</style>
</head>

et entre les balises body ta div

<body><div id="global">mon texte</div>
</body>

Haroeris · 25 Août 2010

Code:

<div id="centre"></div>

:wink:

edit : ou global dans le nom de la classe css

yoh666 · 25 Août 2010

ça marche merci! sauf que mon bloc est décalé de 1/3 sur mon 16/9e.
Par contre il y aurait il un code ou une méthode pour le centrer au milieu de ma page par défault?
et pour l'appliquer à toutes mes pages du site je copie le code ou ya un autre moyen?
en faite je me sert pas de mon fichier styles.css.

DadouDuck · 25 Août 2010

yoh666 a dit:
en faite je me sert pas de mon fichier styles.css.

Pas bien parce que justement, cela t'aurais évité de devoir le coller partout ce code

franckM · 25 Août 2010

Chaque page de ton site doit être architecturée de la sorte:
<head>
...
<link href="style.css" rel="stylesheet" type="text/css" />
...
</head>
<body>
<div id="global">
tout ton contenu (textes,boites...)
</div>
</body>

Et dans ton fichier css, comme on te l'a indiqué:
#global{
margin:0 auto;
width:980px;
}

et normalement chaque page sera centrée sur ton écran avec une largeur de 980 pixels.

Franck

yoh666 · 25 Août 2010

voila une réponse clair, merci tout le monde j'ai compris et ça marche. :wink: