Centrer son site
Résolu
Gariig
Messages postés
199
Statut
Membre
-
monkey_monk Messages postés 611 Date d'inscription Statut Membre Dernière intervention -
monkey_monk Messages postés 611 Date d'inscription Statut Membre Dernière intervention -
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 !
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 !
Configuration: Windows XP Internet Explorer 6.0
31 réponses
- 1
- 2
Suivant
Résumé de la discussion
Le souci concerne le centrage horizontal de l’ensemble des blocs d’un site à l’aide de div et de CSS, sous IE6 sur Windows XP ancien. La solution recommandée consiste à définir un conteneur avec une largeur fixe et à appliquer margin: 0 auto; pour centrer horizontalement le contenu sans affecter les blocs individuels. Des réponses supplémentaires évoquent que centrer le texte via body ou via text-align center peut conduire à des décalages et que le centrage global nécessite souvent un conteneur principal. En cas de page dynamique ou de barre de défilement, il peut être utile de tester également des marges automatiques et de vérifier la compatibilité des règles CSS avec le navigateur.
-
-
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 -
-
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 ! -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
-
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> -
-
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.
-
#conteneur { width:600px; height:auto; margin:0 auto; }
Normalement ça devrais déjà être un peu mieux ! :D Non ? ^^ -
-
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 :/ -
-
-
-
Teste mon code dans ton navigateur tu verras que ya rien qui marche :/ je suis dégouté la lol
-
-
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.
-
Ok j ai tout testé ça marche pas... mais bon tampi je vais revoir les bases
Merci quand meme -
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> -
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
- 1
- 2
Suivant
