Centrer mon site

WRInaute discret
Bonjour,
Je dois commencer à faire un site Internet mais je ne sais pas comment faire pour le centrer et qu'il s'affiche en centré en fonction de tous les écrans.
Je ne sais pas si je suis dans bonne rubrique pour parler de ca !
Quelqu'un peut-il m'aider svp ?
Quand je visualise le site, ce dernier n'est pas du tout centré et part même sur la gauche !
J'en peux plus !
Merci
CODE CSS
Code:
@charset "UTF-8";
#principal {
	height: 634px;
	width: 1000px;
	margin-left: -500px;
	position: absolute;
	left: 50%;
	top: 0px;
	}
#header {
	height: 249px;
	width: 1000px;
}
#milieu {
	height: 363px;
	width: 1000px;
}
#milieugauche {
	float: left;
	height: 363px;
	width: 260px;
}
#milieucentre {
	float: left;
	height: 363px;
	width: 740px;
}
#pied {
	float: left;
	height: 21px;
	width: 1000px;
}

CODE PAGE CONTENEUR
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href="styles3.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="principal">
  <div id="header"></div>
  <div id="milieu">
    <div id="milieugauche"></div>
    <div id="milieucentre"></div>
  </div>
  <div id="pied"></div>
</div>
</body>
</html>

Merciiii
 
WRInaute passionné
Et avec ça ?
Code:
    #principal {
       width: 1000px;
       margin: auto;
       display:block;
    }
Edit : Si tu commences un nouveau site, part sur du HTML 5 non ?
 
WRInaute discret
Et voilà c'était trop beau pour etre vrai !!
Qu'en pensez vous ?
a-effacer.jpg

Code:
<style type="text/css">
<!--
#haut {
    margin: auto;
    display:block;
    left:20px;
	top:20px;
	width:1200px;
	height:417px;
	z-index:1;
}
#milieu {
    margin: auto;
    display:block;
	left:20px;
	top:438px;
	width:1200px;
	height:604px;
	z-index:2;
}
#pied-page {
    margin: auto;
    display:block;
	left:20px;
	top:1040px;
	width:1200px;
	height:349px;
	z-index:3;
}
#menu-principal {
    margin: auto;
    display:block;
		left:20px;
	top:368px;
	width:1200px;
	height:68px;
	z-index:4;
}
#navigation {
    margin: auto;
    display:block;
		left:20px;
	top:436px;
	width:250px;
	height:606px;
	z-index:5;
	background-color: #FFFFFF;
}
#contenu {
    margin: auto;
    display:block;
		left:270px;
	top:436px;
	width:950px;
	height:606px;
	z-index:6;
	background-color: #FFFFFF;
}
body {
	background-image: url(image/shutterstock_123635434.jpg);
	background-repeat: repeat;
}
-->
</style>

Help help
 
WRInaute accro
Le code de ton premier post fonctionne très bien, le souci est entre le clavier et la chaise :wink:
 
Nouveau WRInaute
Salut

Alors, le margin: auto, c'est destiné à centrer un contenu dont on a défini la largeur, donc pas nécessaire dans la navigation et le contenu.

Left et Top n'ont pas de sens en positionnement statique (uniquement en absolute, relative ou fixed), tu peux donc les dégager.

Pour mettre ta navigation "à gauche" de ton contenu, tu peux utiliser un float, comme décrit ci-dessous:

Code:
#haut {
    margin: auto;
   width:1200px;
   height:417px;
}
#milieu {
    margin: auto;
   width:1200px;
   height:604px;
}
#pied-page {
    margin: auto;
   width:1200px;
   height:349px;
}
#menu-principal {
    margin: auto;
   width:1200px;
   height:68px;
}
#navigation {
   float: left;
   width:250px;
   height:606px;
  background-color: #FFFFFF;
}
#contenu {
   width:950px;
   height:606px;
   background-color: #FFFFFF;
}
body {
   background-image: url(image/shutterstock_123635434.jpg);
   background-repeat: repeat;
}

Il faudra sans doute redimensionner #contenu, rajouter une marge par-ci par-là, mais ça pourrait le faire tel quel
 
WRInaute occasionnel
Il y a surtout pour simple.
Tu fais un wrapper global...

Code:
<div id="wrapper">
   <header/>
   <main/>
   <footer/>
</div>

Code:
#wrapper {
   margin:0 auto;
   width:1200px;
}
#header{
   height:417px;
}
#main {
   height:604px;
}
#footer {
   height:349px;
}
 
WRInaute discret
Je suis en congé MOI aujourd'hui LOL !! Je suis tout à vous (mais est-ce que vous, vous êtes tout à moi !!!??)
Bon ben ca marche pas lambi521 !
C'est encore pire que la caputure d'écran
Romu, je ne comprends pas très bien ton code (je suis super novice)

Code:
En 1er tu mets 
<div id="wrapper">
   <header/>
   <main/>
   <footer/>
</div>

Code:
Dois-je remplacer 
wrapper = ??
header = #haut
main = #milieu 
footer #pied-page

Code:
En deuxième tu mets :
#header{
   height:417px;
}
Donc je remplace 
#haut{
   height:417px;
}
Olala j'y comprends rien. Mais pourquoi tout est tirs compliqué avec moi !!
 
WRInaute discret
lambi521
Merci pour ta réponse,
Je n'ai pas de #principal, je le remplace par #haut ?
Et est-ce que je le mets à tous ?
#navigation
#milieu
#pied-page
Etc ...
a-efface.jpg
 
WRInaute passionné
Ha oui j'ai pas repris ton code de base dsl.

Je vais essayer de t'expliquer simplement pour que tu comprennes mieux.

Pour qu'un élément soit centré, il faut qu'il ait une largeur fixe et margin auto pour que ton navigateur calcul à la volée les marge gauche et droite en fonction de la taille de l'écran.

Tu fais un "conteneur" principal où tu appliques mon code, et à l'intérieur tu mets tous les élements de ton site :
<div class="conteneur">
#header
#menu
#content
...
#footer
</div>

Avec le CSS :
Code:
            DIV.conteneur {
               width: 1000px;
               height:auto;
               margin: auto;
               overflow:hidden;
            }

De cette manière ton conteneur sera toujours centré, et les élements qui se trouvent à l'intérieur ne pourrons pas en "sortir".

Pour tes autres éléments à l'intérieur, tu peux leur mettre width:100% si tu veux qu'ils prennent toute les largeur des 1000px
Ou bien width:600px;float:left; sur un élément et width:400px; float:left; pour l'autre élément si tu veux qu'ils soient cote à cote, toujours à l'intérieur du conteneur
 
WRInaute discret
Bon je vais tenter le truc.
Le truc c'est que je suis nulle
J'ai tjrs travailler avec des tableaux et non des conteneurs
du coup je n'ai pas l'habitude
Allez je tente et tiens au courant !
Merci
 
WRInaute discret
lambi521
J'ai fait un conteneur que j'ai appelé principal et à l'intérieur j'ai mis tous mes "morceaux"
Ce que tu m'as dit sur ce code (ci dessous) je le place bien dans mon css ?
DIV.principal {
width: 1000px;
height:auto;
margin: auto;
overflow:hidden;
}
Et après que dois-je faire ?
 
WRInaute discret
Punaise j'y suis presque
Alors tout est centré sauf le footer qui s'est mis derrière le contenu et que je n'arrive pas à bouger !
Quelqu'un peut m'aider (dernière ligne droite !)
Donc tout est mis maintenant dans un seul conteneur qui s'appelle PRINCIPAL
#principal {
margin: auto;
display:block;
left:20px;
top:20px;
width:1130px;
height:1576px;
z-index:1;
}
#haut {
margin:0 auto;
left:20px;
top:20px;
width:1130px;
height:329px;
z-index:2;
}
#menu-principal {
margin:0 auto;
left:20px;
top:349px;
width:1130px;
height:64px;
z-index:3;
background-image: url(image/menu.jpg);
}
#navigation {
margin:0 auto;
left:20px;
top:414px;
width:214px;
height:850px;
z-index:4;
background-color: #FFFFFF;
float: left;
}
#contenu {
margin:0 auto;
left:234px;
top:414px;
width:916px;
height:850px;
z-index:5;
background-color: #FFFFFF;
float: left;
}
#footer {
margin:0 auto;
left:20px;
top:1566px;
width:1130px;
height:329px;
z-index:6;
background-image: url(image/footer.jpg);
}
body {
background-image: url(image/shutterstock_123635434.jpg);
}
-->
</style>
</head>

HELP HELP HELP
 
Nouveau WRInaute
Grosso-modo, un truc comme ça devrait marcher (j'ai mis tout le html pour voir l'enchaînement des divs):

Code:
<html>
<head>
<style>
div { background-color: pink;  /* juste pour voir clair  -- à effacer !!! */ }

#principal {
margin: auto;
width:1130px;
height:1576px;
}
#haut {
height:329px;
}
#menu-principal {
height:64px;
background-image: url(image/menu.jpg);
}
#navigation {
width:214px;
height:850px;
background-color: #FFFFFF;
float: left;
}
#contenu {
width:916px;
height:850px;
background-color: #FFFFFF;
margin-left: 214px;
}
#footer {
height:329px;
background-image: url(image/footer.jpg);
}
body {
background-image: url(image/shutterstock_123635434.jpg);
}
-->
</style>
</head>
<body>
<div id=principal>
        <div id=haut> en haut </div>
        <div id=menu-principal>Menu</div>
        <div id=navigation> navigation </div>
        <div id=contenu> contenu </div>
        <div id=footer> au pied </div>
</div>
</body>
</html>


Donc si on résume, il manquait le float:left, il y avait (à nouveau) des left et des top alors qu'on est en position:static, et les divs sont par défaut de type bloc et prennent par défaut un max de largeur.

Bonne soirée ;-)
 
WRInaute discret
Merci CDURAY !!
C'est déjà mieux mais c'est pas encore ça !
C'est quoi cette marge ?
http://www.votre-faire-part.com/a-effacer-3.jpg
Comment puis-je faire pour l'enlever ? J'ai essayé avec un float mais c pas ça non plus
Et quand tu dis que j'efface, j'efface tte la ligne entière ?
div { background-color: pink; } ?

GRRRRRRRRR
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
<html>
<head>
<style>
div { background-color: pink;  /* juste pour voir clair  -- à effacer !!! */ }

#principal {
margin: auto;
width:1130px;
height:1576px;
}
#haut {
height:329px;
}
#menu-principal {
height:64px;
background-image: url(image/menu.jpg);
}
#navigation {
width:214px;
height:850px;
background-color: #FFFFFF;
float: left;
}
#contenu {
	width:916px;
	height:850px;
	background-color: #FFFFFF;
	margin-left: 214px;
	float: inherit;
}
#footer {
height:329px;
background-image: url(image/footer.jpg);
}
body {
background-image: url(image/shutterstock_123635434.jpg);
}
-->
</style>
</head>
<body>
<div id=principal>
        <div id=haut><img src="image/menu-haut.jpg" width="1130" height="329" /></div>
  <div id=menu-principal>Menu</div>
        <div id=navigation> navigation </div>
        <div id=contenu> contenu </div>
        <div id=footer> au pied </div>
</div>
</body>
</html>
</body>
</html>
 
WRInaute discret
Encore moi !
Là ca marche
Est-ce que quelqu'un peut me dire si mon code est correct ?
Ca merdait au niveau #contenu

Pouvez-vous aussi me dire à quoi correspond ça div { background-color: pink; /* juste pour voir clair -- à effacer !!! */ }
car qd je supprime la ligne tout part en live !
Merci les chouchous

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
<html>
<head>
<style>
div { background-color: pink;  /* juste pour voir clair  -- à effacer !!! */ }

#principal {
margin: auto;
width:1130px;
height:1576px;
}
#haut {
height:329px;
}
#menu-principal {
height:64px;
background-image: url(image/menu.jpg);
}
#navigation {
width:214px;
height:850px;
background-color: #FFFFFF;
float: left;
}
#contenu {
        margin: auto;
	height:850px;
	background-color: #FFFFFF;
	}
#footer {
height:329px;
background-image: url(image/footer.jpg);
}
body {
background-image: url(image/shutterstock_123635434.jpg);
}
-->
</style>
</head>
<body>
<div id=principal>
        <div id=haut><img src="image/menu-haut.jpg" width="1130" height="329" /></div>
  <div id=menu-principal>Menu</div>
        <div id=navigation> navigation </div>
        <div id=contenu> contenu </div>
        <div id=footer> au pied </div>
</div>
</body>
</html>
</body>
</html>
 
Nouveau WRInaute
Qques petites améliorations:
  • tu as 2x </body></html>
    le "div { background-color..." me servait à visualiser les blocs (je n'ai pas tes images) supprimer cette ligne n'a -normalement- aucun impact. Ici, cela en avait un car tu répètes <html><head><style> dans une balise <style> déjà ouverte... Quand on nettoie, ça donne:

Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
#principal {
	margin: auto;
	width:1130px;
	height:1576px;
}
#haut {
	height:329px;
}
#menu-principal {
	height:64px;
	background-image: url(image/menu.jpg);
}
#navigation {
	width:214px;
	height:850px;
	background-color: #FFFFFF;
	float: left;
}
#contenu {
	margin: auto;
	height:850px;
	background-color: #FFFFFF;
}
#footer {
	height:329px;
	background-image: url(image/footer.jpg);
}
body {
	background-image: url(image/shutterstock_123635434.jpg);
}
</style>
</head>
<body>
<div id=principal>
<div id=haut><img src="image/menu-haut.jpg" width="1130" height="329" /></div>
<div id=menu-principal>Menu</div>
<div id=navigation> navigation </div>
<div id=contenu> contenu </div>
<div id=footer> au pied </div>
</div>
</body>
</html>
 
WRInaute discret
Merci de tout mon coeur pour l'aide de tout le monde, un grand merci car ca marche et c'est grâce à vous !!
Allez je peux essayer de créer un menu maintenant
ENCORE MERCI MERCI MERCI
 
Discussions similaires
Haut