Centrer mon site

garancetosello · 26 Novembre 2014

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

cduray · 26 Novembre 2014

Pourquoi pas comme ça?
Code:
#principal {
   width: 1000px;
   margin: 0 auto;
 }

garancetosello · 26 Novembre 2014

Ca marche pas ! :idea:
snif

lambi521 · 26 Novembre 2014

Et avec ça ?
Code:
    #principal {
       width: 1000px;
       margin: auto;
       display:block;
    }
Edit : Si tu commences un nouveau site, part sur du HTML 5 non ?

cduray · 26 Novembre 2014

il faut surtout enlever le position:absolute, sinon le margin: auto n'aura pas l'effet escompté

garancetosello · 26 Novembre 2014

Je suis entrain de tester autrement
Je vous tiens vite au courant
j'ai changé mes conteneurs
Vous me direz ce que vous en pensez

garancetosello · 26 Novembre 2014

Merci ca marche les chatonsssss
Merci merci merci merci merci à l'infini !!

garancetosello · 26 Novembre 2014

je me suis emballée trop vite.
je vous envoie les captures d'écrans
Il y a des bugs

garancetosello · 26 Novembre 2014

Et voilà c'était trop beau pour etre vrai !!
Qu'en pensez vous ? [IMG]

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

zeb · 27 Novembre 2014

Le code de ton premier post fonctionne très bien, le souci est entre le clavier et la chaise :wink:

cduray · 27 Novembre 2014

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

garancetosello · 27 Novembre 2014

Merci pour vos réponses. J'essaye ce soir. Suis au boulot grrrr

zeb · 27 Novembre 2014

garancetosello a dit:

Suis au boulot grrrr
Cliquez pour agrandir...

Comme tout le monde ici ...

-Romu- · 27 Novembre 2014

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;
}

-Romu- · 27 Novembre 2014

zeb a dit:

garancetosello a dit:

Suis au boulot grrrr
Cliquez pour agrandir...

Comme tout le monde ici ...
Cliquez pour agrandir...

Oui, mais faut pas le dire

garancetosello · 28 Novembre 2014

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

lambi521 · 28 Novembre 2014

Autant pour moi :

Code:

        #principal {
           width: 1000px;
           height:auto;
           margin: auto;
           overflow:hidden;
        }

garancetosello · 28 Novembre 2014

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

lambi521 · 28 Novembre 2014

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

garancetosello · 28 Novembre 2014

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

garancetosello · 28 Novembre 2014

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 ?

baud74 · 28 Novembre 2014

ouvrir la page dans un navigateur et nous donner le code html si cela ne fait pas le résultat attendu.

garancetosello · 28 Novembre 2014

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

garancetosello · 28 Novembre 2014

cduray · 28 Novembre 2014

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 ;-)

garancetosello · 28 Novembre 2014

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>

garancetosello · 28 Novembre 2014

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>

cduray · 1 Décembre 2014

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>

garancetosello · 1 Décembre 2014

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

Similar Threads - Centrer	Forum	Date
Balise Canonical pour "concentrer le jus" SEO?	Problèmes de référencement spécifiques à vos sites	18 Juin 2015
Centrer image thème naturespace	Développement d'un site Web ou d'une appli mobile	19 Mars 2015
Centrer une image en height	Développement d'un site Web ou d'une appli mobile	27 Février 2015
peut on oublier google et se concentrer sur bing et yahoo?	Débuter en référencement	7 Février 2013
Centrer une image horizontalement sur un div	Développement d'un site Web ou d'une appli mobile	25 Septembre 2012
Centrer verticalement un texte (CSS)	Développement d'un site Web ou d'une appli mobile	16 Février 2012
centrer menu horizontal deroulant	Développement d'un site Web ou d'une appli mobile	28 Juin 2011
[css] Comment centrer un bloc css?	Développement d'un site Web ou d'une appli mobile	25 Août 2010
[RESOLU] jQuery : centrer par rapport à la taille du navigateur	Développement d'un site Web ou d'une appli mobile	25 Août 2010