Centrer une page ?

albert · 29 Février 2008

Voilà, je viens de m'acheter un écran 22'' et je me rend compte que pour ceux qui ont une résolution élevée, mon site est mal conçu.

Je voudrais donc que l'ensemble de la page soit centrée au lieu d'avoir le tout de collé à gauche. Comment faire ? (c'est le site de mon www).
A noter qu'il me faudrait les détails car je suis pas doué en html et encore moins avec les css...

Merci pour votre aide.

mikaelka · 1 Mars 2008

il faut que les bord soit en auto dans ton css pour ton conteneur.

Dans le .css :

madiv{
margin-left: auto;
margin-right: auto;
}

albert · 1 Mars 2008

-> Mikaelka Désolé mais je ne vois pas à quel niveau le placer le madiv{....

Koidirou · 1 Mars 2008

body {
margin:auto;
}

albert · 1 Mars 2008

Ca ne donne rien, en fait je ne sais pas ou le placer ou ce que celà doit remplacer...

UsagiYojimbo · 1 Mars 2008

Soit dans une feuille de style externe, soit entre des balises <style></style> dans ta page.

athoms · 1 Mars 2008

Pas du tout conforme aux standards, mais permet souvent de résoudre des petits problèmes de ce genre...
<center></center> entre <body>et </body>. C'est sale mais ça marche assez bien

albert · 1 Mars 2008

-> athoms : le résultat est le meilleur obtenu mais il reste plusieurs éléments qui sont pas centrés comme la partie en haut de page ...

mikaelka · 1 Mars 2008

Si ces éléments dont tu parle sont bien dans le bloc qui est centré alors peut être qu'il sont en "position : absolute;" au lieu de "position : relative;".

exemple :
monElementPasCentré
{
position : relative;
}

Ces détails sont à placer aussi dans ton fichier css.

deepo · 1 Mars 2008

I love css

Salut Albert,

Dans un premier temps, tu devrais consulter l'excellent site d'Alsacréations.

Ceci étant, et pour t'éviter le déplacement

voici ce que tu peux faire.

juste après ta balise <body> tu ouvre un <div> que tu appelle comme tu veux, par exemple : <div id="global">

La dedans tu mets tout ton site

</div>
n'oublie pas de refermer le <div> juste avant </body>

et dans la feuille de style tu donne ces propriétés à ton div "global"

Code:

#global {
   margin: 0 auto; /* ou margin: 0 auto 0 auto; correspondant à tes marges dans le sens des aiguilles d'une montre, soit : haute droite basse gauche.*/
  padding: 0; /* marge intérieure */
  width: 1000px; /* cette largeur est un exemple mais tu dois en mettre une si tu veux que le margin auto fonctionne. */
}

Le fait de donner une largeur fixe va peut-être de causer quelques soucis avec tes éléments intérieurs surtout si tu leur à donner une largeur à eux aussi, mais c'est un début de réponse.

Bon courage
a{++}

Pandore · 1 Mars 2008

mikaelka a dit:
il faut que les bord soit en auto dans ton css pour ton conteneur.

Dans le .css :

madiv{
margin-left: auto;
margin-right: auto;
}

Koidirou a dit:
body {
margin:auto;
}

Aucune chance que ça marche. Il faut impérativement spécifier la largeur du conteneur, si on veut utiliser la valeur "auto". :wink: