Centrer son site [Résolu/Fermé]

Signaler
Messages postés
194
Date d'inscription
samedi 5 septembre 2009
Statut
Membre
Dernière intervention
4 avril 2011
-
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
-
Bonjour,
J'utilise les <div> pour mon faire les bloc de mon site. Et je voudrai le centrer au mileur de la page.

Quand je fais <div align="center"> juste apres <body>, ça me centre tous les contenus des tous mes blocs <div>. Or je voudrai centrer l'ensemble de mon site.

Je ne sais pas quoi ajouter pour faire cela dans mon fichier CSS.

Merci de votre aide !

31 réponses


body
{
text-align : center;
}
Quand je fais

Body
{
text-align : center;
}

ça me centre tout le texte dans les blocs. Mais mon site reste toutjours a gauche...

Je voudrai centrer mon site au milieu de la page.

Qqun a une idée ?

Merci

Alors
body
{
margin : auto;
}
Messages postés
194
Date d'inscription
samedi 5 septembre 2009
Statut
Membre
Dernière intervention
4 avril 2011
9
Quand je fais

body
{
margin : auto;
}

ça me colle mon site en haut a gauche de la fenetre sans aucun espace.

Qqun a une autre idée pleaaase ?

Merci !

On peut avoir le code source d'une page du site ?

ou l'adresse ?

Oui ! Je voudrai juste centrer l'ensemble ! voici mon code :

<html>
<head>
<style>
body
{
margin : auto;
}
#conteneur {
position:relative;
float:left;
border-color:black;
border-style: solid;
border-width:2;
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
}
#header {
width:600;
height:100;
padding:30;
background-color:#d3ff23;
border-bottom-style:solid;
border-bottom-color:black;
border-bottom-width:2;
}
#colonne {
float:left;
width:140;
height:1000;
padding:10;
background-color:lightblue;
border-right-style:solid;
border-right-color:black;
border-right-width:2;
}
#main {
width:460;
height:1000;
padding:10;
background-color:#ffffff;
float:left;
position:relative;
}
#menu1 {
float:left;
width:110;
height:20;
padding:10;
background-color:#d3ff23;
border-style: outset;
margin-bottom:10px;
}
#menu2 {
float:left;
width:110;
height:20;
padding:10;
background-color:#d3ff23;
border-style: outset;
margin-bottom:10px;
}
#menu3 {
float:left;
width:110;
height:20;
padding:10;
background-color:#d3ff23;
border-style: outset;
margin-bottom:10px;
}
#menu4 {
float:left;
width:110;
height:20;
padding:10;
background-color:#d3ff23;
border-style: outset;
margin-bottom:10px;
}
#para {
font-size:24px;
text-decoration: overline;
font-weight:bold;
font-family:verdana;
color:navy;
font-style:italic;
}
#boite1 {
border-style:solid;
border-color:lightblue;
margin-bottom:10;
padding:10;
}
#boite2 {
border-style:solid;
border-color:lightblue;
margin-bottom:10;
padding:10;
} h3 {
color:#000000;
font-family-:Arial;
font-weight:bold;
text-decoration:underline;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="header">
<p id="para">Voici le header</p>
</div>
<div id="colonne">
<div id="menu1">
Accueil
</div>
<div id="menu2">
Photoshop
</div>
<div id="menu3">
Forum
</div>
<div id="menu4">
Liens
</div>
</div>
<div id="main">
<div id="boite1">
<h3>Flash</h3>
Le nom de bibliothèque ne sert qu'à retrouver facilement un clip dans la biblitohèque
Un identifiant permettant d'utiliser un clip dans la bibliothèque directement avec Action Script.
Un identifiant représentant une occurrence d'un clip sur scène.
</div>
<div id="boite2">
<h3>Javascript</h3>
Le nom de bibliothèque ne sert qu'à retrouver facilement un clip dans la biblitohèque
Un identifiant permettant d'utiliser un clip dans la bibliothèque directement avec Action Script.
Un identifiant représentant une occurrence d'un clip sur scène.
</div>
</div>
</div>
</body>
</html>

Mon code marche ou pas ? Plus de question ?
Superstefanou non il marche pas ton code. ça colle mon site dans le coin en haut a gauche ce que tu m a donné... Je voudrai centrer l'ensemble du site moi.
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
117
#conteneur { width:600px; height:auto; margin:0 auto; }

Normalement ça devrais déjà être un peu mieux ! :D Non ? ^^

L'erreur vient pas de moi pourtant ...
Messages postés
194
Date d'inscription
samedi 5 septembre 2009
Statut
Membre
Dernière intervention
4 avril 2011
9
Monkey ça ne marche pas non plus désolé. Quand je fais ça,

#conteneur { width:600px; height:auto; margin:0 auto; }

ça ne bouge pas du tout !

J ai peut etre mal codé mon site je ne sais pas,

je voudrai juste centrer mon <div id="conteneur">Tout le site est ici !</div>

C'est pas simple :/

.conteneur
{
margin :auto
}
Messages postés
194
Date d'inscription
samedi 5 septembre 2009
Statut
Membre
Dernière intervention
4 avril 2011
9
ça marche pas non plus désolé...

Tu as mis des balises dans ta page en HTML...?
Messages postés
194
Date d'inscription
samedi 5 septembre 2009
Statut
Membre
Dernière intervention
4 avril 2011
9
Teste mon code dans ton navigateur tu verras que ya rien qui marche :/ je suis dégouté la lol

Commence par créer une page HTML et une page CSS...
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
117
Ton css est très mauvais... met width:100%; pour body, fixe une largeur à conteneur, enlève le float (pkoi un float ici..) et met-lui encore margin:0 auto.
Messages postés
194
Date d'inscription
samedi 5 septembre 2009
Statut
Membre
Dernière intervention
4 avril 2011
9
Ok j ai tout testé ça marche pas... mais bon tampi je vais revoir les bases

Merci quand meme
Messages postés
194
Date d'inscription
samedi 5 septembre 2009
Statut
Membre
Dernière intervention
4 avril 2011
9
J ai modifié ma page (code simplifié pour voir l'essentiel)

Je voudrai centrer ma page au milieu mais cela ne marche pas avec margin:0 auto

Que dois je faire ? Merci de votre aide

voici mon code:

<html>
<head>
<style>
body {
margin:0 auto;
width:100%;
}
#conteneur {
width:700;
height:1000;
position:relative;
}
#colonne {
width:200;
height:1000;
float:left;
background-color:blue;
position:relative;
}
#main {
width:500;
height:1000;
float:left;
}
</style>
</head>

<body>
<div id="conteneur">
<div id="colonne">
hello
</div>
<div id="main">
salut
</div>
</div>
</body>
</html>
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
117
Le margin:0 auto; doit être dans la css de ton conteneur (qui à une taille fixe) car dans le body, vu qu'il est a width:100%; il ne peut pas être "déplacé" par ses marges.

J'espère que ça résous ton problème ! :D