1. ✅ Apprenez une METHODE qui marche pour votre SEO ! Formation à distance avec Olivier Duffez et Fabien Facériès + aide pour prise en charge du financement
    Rejeter la notice

Centrer mon site

Discussion dans 'Demandes d'avis et de conseils sur vos sites' créé par garancetosello, 26 Novembre 2014.

  1. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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
     
  2. cduray
    cduray Nouveau WRInaute
    Inscrit:
    7 Avril 2008
    Messages:
    38
    J'aime reçus:
    0
    Pourquoi pas comme ça?

    Code:
    #principal {
       width: 1000px;
       margin: 0 auto;
     }
    
     
  3. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Ca marche pas ! :idea:
    snif
     
  4. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    Et avec ça ?
    Code:
        #principal {
           width: 1000px;
           margin: auto;
           display:block;
        }
    
    Edit : Si tu commences un nouveau site, part sur du HTML 5 non ?
     
  5. cduray
    cduray Nouveau WRInaute
    Inscrit:
    7 Avril 2008
    Messages:
    38
    J'aime reçus:
    0
    il faut surtout enlever le position:absolute, sinon le margin: auto n'aura pas l'effet escompté
     
  6. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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
     
  7. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Merci ca marche les chatonsssss
    Merci merci merci merci merci à l'infini !! :D
     
  8. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    je me suis emballée trop vite.
    je vous envoie les captures d'écrans
    Il y a des bugs :oops:
     
  9. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 190
    J'aime reçus:
    1
    Le code de ton premier post fonctionne très bien, le souci est entre le clavier et la chaise :wink:
     
  11. cduray
    cduray Nouveau WRInaute
    Inscrit:
    7 Avril 2008
    Messages:
    38
    J'aime reçus:
    0
    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
     
  12. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Merci pour vos réponses. J'essaye ce soir. Suis au boulot grrrr
     
  13. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 190
    J'aime reçus:
    1
    Comme tout le monde ici ... :D
     
  14. -Romu-
    -Romu- WRInaute occasionnel
    Inscrit:
    19 Avril 2012
    Messages:
    280
    J'aime reçus:
    0
    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;
    }
    
    
     
  15. -Romu-
    -Romu- WRInaute occasionnel
    Inscrit:
    19 Avril 2012
    Messages:
    280
    J'aime reçus:
    0
    Oui, mais faut pas le dire ;)
     
  16. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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 !!
     
  17. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    Autant pour moi :
    Code:
            #principal {
               width: 1000px;
               height:auto;
               margin: auto;
               overflow:hidden;
            }
    
     
  18. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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 ...
    [​IMG]
     
  19. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    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
     
  20. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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
     
  21. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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 ?
     
  22. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    586
    J'aime reçus:
    0
    ouvrir la page dans un navigateur et nous donner le code html si cela ne fait pas le résultat attendu.
     
  23. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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
     
  24. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
  25. cduray
    cduray Nouveau WRInaute
    Inscrit:
    7 Avril 2008
    Messages:
    38
    J'aime reçus:
    0
    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 ;-)
     
  26. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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>
    
     
  27. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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>
    
     
  28. cduray
    cduray Nouveau WRInaute
    Inscrit:
    7 Avril 2008
    Messages:
    38
    J'aime reçus:
    0
    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>
    
     
  29. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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
     
Chargement...
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