Centrer son site
Résolu
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
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.
-
Sinon, un petit overflow:hidden; ...comme ça pas de scrollbar ...mais le contenu qui "déborde" ne sera pas visible !
-
Ok merci pour l'info.
Au fait faudra que tu m'apprenne a faire un site en Flash ça m interesse ;)
A + -
ContributeurC EST NORMAL TON EXEMPLE N EST CENTRE QUE HORIZONTALEMENT !!!
mais si tu remonte le bas , quand la scrollbar apparaita tu auras le meme decalage de 10px mais a GAUCHE ;-))
c est obligatoire d avoir ce decalage si tu as une div dynamic, la scrolbar fait partie du navigateur , pas de la page !!!!!! -
ben moi je trouve pas ça normal d'avoir le site qui remonte de 10 px comme ça..
J'ai mis au point une solution encore plus simple la (compatible tout navigateur et qui reste en place malgré la barre de scroll):
<html>
<head>
<style>
#conteneur{
width : 800px;
height : 300px;
background-color:#123;
color:#fff;
margin-top: 200;
}
</style>
</head>
<body>
<div align="center">
<table>
<div id="conteneur">
hello
</div>
</table>
</div>
</body>
</html> -
ContributeurRéduis et quand les bords de la fenetre de ton navigateur arrive au niveau des bords du Div, et bien le Div remonte de 10px ( lol ) ça arrive aussi bien sous IE que sur Mozilla.. ????????????????????????
non je ne vois pas !!! a part bien sur quand la scrolbar apparait , mais la c est normal !! -
Si, ya un décalage quand tu redimensionne la fenetre du navigateur:
Réduis et quand les bords de la fenetre de ton navigateur arrive au niveau des bords du Div, et bien le Div remonte de 10px ( lol ) ça arrive aussi bien sous IE que sur Mozilla..
Mais façon t embete pas avec ça... je vais mettre une big <table> autour de mon site parce que franchement ya pas de solution... -
Contributeurça produit un décalage sous IE8 quand tu réduis la fenetre
quel decalage ???? il ni as aucun decalage !
ce que j ai fais !
le centrage ce fait par CSS
body{
margin:0;/* pour éviter les marges */
text-align:center;/* pour corriger le bug de centrage IE */
}
Et sur la div conteneur
#conteneur{
position:absolute;
left:50%;/* pour deplacer la div vers la gauche */
top:50%;/* pour deplacer la div vers le bas */
width:800px;
height:300px;
margin-top:-150px;/* moitié de la hauteur en valeurs negative - pour recentrer la div par raport au top:50% */
margin-left:-400px;/* moitié de la largeur en valeurs negative - pour recentrer la div par raport au left:50%*/
background-color:#123;
color:#fff;
text-align:left; /* pour realigner le texte a gauche */
}
Si tu ne comprend pas enleve ou change les valeurs une par une et regarde a chaque fois ce qui ce passe , tu vas comprendre les fonctions de ces valeurs plus facilement !
a+ -
Merci pour ta réponse.
En effet ça marche ! mais je ne comprend pas du tout pourquoi tu as fais tout ça... et ça produit un décalage sous IE8 quand tu réduis la fenetre...
Sérieux j en ai trop marre, je pense que je vais mettre :
<center>
<table>
<div>
Mon site
</div>
</table>
</center>
et puis voila...
Merci en tout cas -
ContributeurSALUT
Voila comment tu peux faire
<!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"> <head> <title>RAD ZONE Webcreation </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="http://radservebeer.free.fr" /> <meta name="generator" content="PSPad editor, www.pspad.com" /> <style type="text/css"> /*<![CDATA[*/ body{ margin:0;/* pour éviter les marges */ text-align:center;/* pour corriger le bug de centrage IE */ } #conteneur{ position:absolute; left:50%; top:50%; width:800px; height:300px; margin-top:-150px;/* moitié de la hauteur */ margin-left:-400px;/* moitié de la largeur */ background-color:#123; color:#fff; text-align:left; /* pour realigner le texte a gauche */ } /*]]>*/ </style> </head> <body> <div id="conteneur"> hello </div> </body> </html> -
je suis vraiment désolé mais je n'arrive toujours pas à centrer mon site...
Merci de tester le code suivant dans votre navigateur SVP.
Moi j'uilise IE8 et ça ne marche pas...
<html>
<head>
<style>
#conteneur{
width : 800px;
height : 300px;
margin:auto;
background-color:#123;
color:#fff;
}
</style>
<body>
<div id="conteneur">
hello
</div>
</body> -
utilise ça dans le css :
#conteneur{
width : 800px;
height : 600px;
margin:auto;
}
et dans ta page html tu fais une structure comme ça :
<html>
<body>
<div id="conteneur">
Ton site
</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 -
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> -
Ok j ai tout testé ça marche pas... mais bon tampi je vais revoir les bases
Merci quand meme -
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.
-
Commence par créer une page HTML et une page CSS...
-
Teste mon code dans ton navigateur tu verras que ya rien qui marche :/ je suis dégouté la lol
-
Tu as mis des balises dans ta page en HTML...?
-
ça marche pas non plus désolé...
-
.conteneur
{
margin :auto
}
- 1
- 2
Suivant
