Partage
  • Partager sur Facebook
  • Partager sur Twitter

Centrer Page Web

    16 juin 2006 à 11:52:39

    Bonjour,
    Je voudrais savoir comment faire pour centrer un page web verticalement et horizontalement.
    J'ai déjà fais : margin-top, margin-bottom etc.

    J'ai cherché sur le site mais je trouve pas.

    Avez-vous une solution pour moi ?

    Merci d'avance de votre aide. :)
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      16 juin 2006 à 11:59:24

      Je crois que t'as juste besoin de mettre body{margin-auto;} et ça fait l'affaire.
      Mais va jetter un coup d'oeil sur le TP pour créer son site web dans le cours de xHTML/CSS, je sais que c'est expliqué.
      • Partager sur Facebook
      • Partager sur Twitter
        16 juin 2006 à 12:00:53

        Sur cette page :

        http://www.siteduzero.com/tuto-3-62-1-creons-le-design-de-votre-site-web.html

        Tu peux y voir dans le code source du CSS :

        margin: auto; /* Pour centrer notre page */


        ;)
        • Partager sur Facebook
        • Partager sur Twitter
          16 juin 2006 à 12:01:09

          Salut,

          C'est dans les cours de matéo.
          Je te conseil de d'utiliser un tableau, height : 100%, width: 100%
          Et ensuite tu met qu'une seule cellule, et vertical-align: middle, text-align: center ;) .
          • Partager sur Facebook
          • Partager sur Twitter
            16 juin 2006 à 13:41:34

            Citation : Metallica_POTTER

            Salut,

            C'est dans les cours de matéo.
            Je te conseil de d'utiliser un tableau, height : 100%, width: 100%
            Et ensuite tu met qu'une seule cellule, et vertical-align: middle, text-align: center ;) .

            Aaaarg, damnation, je m'étrangle, je me noie :D !
            Combien de fois faudra-t-il le répéter : Pas de tableau pour la mise en page !!!
            Il suffit de définir height et margin et de mettre height : auto et margin : auto. Rajoute à cela text-align : center et e sera parfait. Sinon, tu opeux aussi définir tes marges à la main de façon égale, du style margin : 10% (marges de 10% du corps).
            • Partager sur Facebook
            • Partager sur Twitter
              16 juin 2006 à 14:11:38

              En fait moi je l'ai déjà mis "margin: auto;" mais je sais pas si ça vient de ça mais ma mise en page est faites en tableau : j'ai fais 4 tableaux : 1 pour l'en tête, 1 pour le menu, 1 pour le corps et 1 pourle Copyright.
              Peut-être que ça vient de là.

              Sinon dans mon code .css pour la partie body, j'ai mis :

              Citation : Mon body

              body
              {
              width: 760px;
              margin: auto;
              background-color: navy;
              color: white;
              margin-top: 20px;
              margin-bottom: 20px;
              }



              Voilà, metrci d'avance de votre aide. :)
              • Partager sur Facebook
              • Partager sur Twitter
                16 juin 2006 à 14:45:58

                Citation : llouis

                Citation : Metallica_POTTER

                Salut,

                C'est dans les cours de matéo.
                Je te conseil de d'utiliser un tableau, height : 100%, width: 100%
                Et ensuite tu met qu'une seule cellule, et vertical-align: middle, text-align: center ;) .

                Aaaarg, damnation, je m'étrangle, je me noie :D !
                Combien de fois faudra-t-il le répéter : Pas de tableau pour la mise en page !!!
                Il suffit de définir height et margin et de mettre height : auto et margin : auto. Rajoute à cela text-align : center et e sera parfait. Sinon, tu opeux aussi définir tes marges à la main de façon égale, du style margin : 10% (marges de 10% du corps).



                Désolé :euh: . Moi je n'ai pas appris avec matéo, j'ai juste lu ces cours vite fait, moi j'ai apris... En lisant les codes sources de page web :-° .
                Et pourquoi, il ne faut pas de tableau pour le mise en page ?
                • Partager sur Facebook
                • Partager sur Twitter
                  16 juin 2006 à 14:52:08

                  Salut, pour centrer le contenu dans une page
                  (si on connait les largueurs et hauteur du contenu ):
                  Il faut positionner en absolu, l'element à centrer à 50% du bord gauche, à 50% du haut;
                  Cela positionnera que le coin supérieur gauche au centre de la page

                  Puis il faut lui appliquer une marge négative de la moitié de la hauteur ou de la largueur.


                  Exemple de CSS :


                       #global {
                       position:absolute;
                       left: 50%;
                       top: 50%;
                       width: 700px;
                       height: 400px;
                       margin-top: -200px; /* moitié de la hauteur */
                       margin-left: -350px; /* moitié de la largeur */
                       
                       }
                  • Partager sur Facebook
                  • Partager sur Twitter
                    16 juin 2006 à 14:54:13

                    <lien url"=http://openweb.eu.org/articles/problemes_tableaux/">Cet article</lien> devrait t'intéresser !

                    La spécification du W3C précise que "Les tableaux ne doivent contenir que des données tabulaires".
                    • Partager sur Facebook
                    • Partager sur Twitter
                      16 juin 2006 à 14:59:18

                      Merci pour le lien llouis. Moi pour la mise en page je n'utilise que des tableaux :euh: , alors...
                      Il va falloir que je lise les cours de matéo et que je recode le design de ma team :( .
                      Mais, si c'est pour une bonne raison ;) .
                      • Partager sur Facebook
                      • Partager sur Twitter
                        16 juin 2006 à 17:52:12

                        Ces cours sont eux aussi très rapides et vachement instructifs !
                        • Partager sur Facebook
                        • Partager sur Twitter
                          16 juin 2006 à 17:54:07

                          Je crois hélas que de plus en plus de zéros n'aprécient pas la lecture.

                          C'est bien dommage.
                          • Partager sur Facebook
                          • Partager sur Twitter
                            5 octobre 2006 à 16:56:13

                            de meme pour moi la balise "margin: auto; " me le colle en haut a gauche.
                            • Partager sur Facebook
                            • Partager sur Twitter
                              5 octobre 2006 à 18:23:40

                              Il faut une largeur fixe
                              • Partager sur Facebook
                              • Partager sur Twitter

                              Centrer Page Web

                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                              • Editeur
                              • Markdown