Centrer son site

Résolu/Fermé
Gariig Messages postés 194 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 4 avril 2011 - 6 oct. 2009 à 23:25
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 - 16 oct. 2009 à 14:53
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 !
A voir également:

31 réponses

le scandinave Messages postés 155 Date d'inscription samedi 28 juillet 2007 Statut Membre Dernière intervention 29 avril 2015 8
15 oct. 2009 à 11:57
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>
0
Gariig Messages postés 194 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 4 avril 2011 9
16 oct. 2009 à 02:17
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>
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
16 oct. 2009 à 02:59
SALUT

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>
0
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
16 oct. 2009 à 03:51
ç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+
0
Gariig Messages postés 194 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 4 avril 2011 9
16 oct. 2009 à 04:24
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...
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
16 oct. 2009 à 04:30
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.. ????????????????????????

non je ne vois pas !!! a part bien sur quand la scrolbar apparait , mais la c est normal !!
0
Gariig Messages postés 194 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 4 avril 2011 9
16 oct. 2009 à 04:48
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>
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
16 oct. 2009 à 05:04
C 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 !!!!!!
0
Gariig Messages postés 194 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 4 avril 2011 9
16 oct. 2009 à 05:20
Ok merci pour l'info.

Au fait faudra que tu m'apprenne a faire un site en Flash ça m interesse ;)

A +
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 128
16 oct. 2009 à 14:53
Sinon, un petit overflow:hidden; ...comme ça pas de scrollbar ...mais le contenu qui "déborde" ne sera pas visible !
0