7 Replies Latest reply: Apr 14, 2012 8:02 AM by Ben Pleysier RSS

    center container problem

    Carla Leliveld Community Member

      Hi,

       

      I wanted to rebuild an existing site which I've made a few years ago, but I can't find where I'm going wrong.

       

      The site www.tandzorgbelfort.nl was first made with tables, and now I made div's.

      The page with div's which is going wrong is http://www.tandzorgbelfort.nl/aften_alg.html

      As you can see the container is 1200px. Te headers, menu, content, footer, info div are positioned at the left. This must me center.

      I've allready tried some changes in the css, but I don't see it anymore.

      See the rest of the site how it has to look finaly. http://www.tandzorgbelfort.nl/behandelingen.html

       

      Can someone help me?

      Thanks!

      Carla

        • 1. Re: center container problem
          Ben Pleysier CommunityMVP

          Hello Carla,

           

          You need to rethink your approach to your design using CSS instead of using tables. There are some very good tutorials available some of which can be found here http://forums.adobe.com/thread/492638

           

          To give you an idea, copy and paste the following into a new document and view in your favourite browser

           

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Untitled Document</title>
          <style>
          html {
              margin: 0;
              padding: 0;
              background-color: #222222;
              height: 100%;
              overflow-y: scroll;
          }
          body {
              width: 1200px;
              margin: auto;
              background-image: url(http://www.tandzorgbelfort.nl/images/ag_vragen.gif);
              height: 100%;
          }
          .header {
              height: 170px;
          }
          .nav {
              height: 35px;
          }
          .article {
              font-size: 0.8em;
              font-family: Arial, Helvetica, sans-serif;
              line-height: 17px;
          }
          .article .featurebox {
              width: 325px;
              float: left;
              background-color: #FFF;
              border: 1px solid #F00;
              padding: 10px;
          }
          .article .featurebox.left {
              margin: 20px 100px 20px 150px;
          }
          .article .featurebox.right {
              margin: 20px 150px 20px 100px;
          }
          </style>
          </head>
          
          <body>
          <div class="header"></div>
          <div class="nav">MenuBar</div>
          <div class="article">
              <div class="featurebox left">
                <p align="justify">Aften</p>
              <p align="justify">Wat zijn aften?</p>
              <p align="justify">Sommige   mensen worden    regelmatig geplaagd door pijnlijke zweertjes in de   mond. Deze zweertjes,    aften, komen zowel voor bij jongeren als bij   volwassenen. De oorzaak is    niet helemaal duidelijk, maar ze richten   geen blijvende gezondheidsschade    aan.</p>
              <p>Aften zijn blaasjes of    zweertjes in de mond   met een doorsnede van drie tot vier millimeter. Het zijn    grijswitte   of dikke gele plekjes met een rode ontstoken rand. Aften    verschijnen   aan de binnenkant van de lippen, wangen of onder de tong. Ze    bezorgen   een stekende pijn tijdens het eten van zuur of heet voedsel. Sommige      mensen voelen een afte van te voren aankomen. Ze herkennen het   pijnlijke    gevoel wat erbij hoort. Soms ziet ook het mondslijmvlies   rood. </p>
            </div>
              <div class="featurebox right">
                <p align="justify">Aften</p>
              <p align="justify">Wat zijn aften?</p>
              <p align="justify">Sommige   mensen worden    regelmatig geplaagd door pijnlijke zweertjes in de   mond. Deze zweertjes,    aften, komen zowel voor bij jongeren als bij   volwassenen. De oorzaak is    niet helemaal duidelijk, maar ze richten   geen blijvende gezondheidsschade    aan.</p>
              <p>Aften zijn blaasjes of    zweertjes in de mond   met een doorsnede van drie tot vier millimeter. Het zijn    grijswitte   of dikke gele plekjes met een rode ontstoken rand. Aften    verschijnen   aan de binnenkant van de lippen, wangen of onder de tong. Ze    bezorgen   een stekende pijn tijdens het eten van zuur of heet voedsel. Sommige      mensen voelen een afte van te voren aankomen. Ze herkennen het   pijnlijke    gevoel wat erbij hoort. Soms ziet ook het mondslijmvlies   rood. </p>
            </div>
          </div>
          </body>
          </html>
          

           

          Hup Holland Hup

          Gramps

          • 2. Re: center container problem
            Carla Leliveld Community Member

            Hi Gramps,

             

            I saw your where online

            Yes your wright about using css and div's instead of tables, but with this site it is for the moment al lot of work and needs to be done carefully, before I lose things.
            I can do this next week, but first I need to get the div's (with tables in it) centered.

             

            Can you help me?

            Carla

            • 3. Re: center container problem
              martcol Community Member

              Does it help if you change this:

               

               

              #container {
                  margin: 0;

                  padding-top: 0;

                  vertical-align: top;

                  width: 1200px;

              }

               

              to this:

               

              #container {

                  margin: 0 auto;

                  padding-top: 0;

                  vertical-align: top;

                  width: 1200px;

               

              }

               

              Martin    

              • 4. Re: center container problem
                Ben Pleysier CommunityMVP

                Hi again,

                 

                Try adding the following to just above the </head> tag

                 

                <style>
                html {
                    height: 100%;
                    background-color: #333333;
                }
                body {
                    width: 1200px;
                    margin: auto;
                    height: 100%;
                }
                </style>
                

                 

                Gramps

                • 5. Re: center container problem
                  Carla Leliveld Community Member

                  Thanks for your reply, but no, it didn't help.

                   

                  Carla

                  • 6. Re: center container problem
                    Carla Leliveld Community Member

                    Hi Gramps,

                     

                    Your my hero . My reply with didn't help has crossed your message.

                     

                    Thanks a lot. I start feeling guilty . Have a good weekend.

                     

                    Best regards.

                    Carla

                    • 7. Re: center container problem
                      Ben Pleysier CommunityMVP

                      @Carla,

                       

                      In augutus zijn wij in Elburg, 50 jarig jubileum van Veluwestrandbad.

                       

                      Hopen op mooi weer.

                      Ben a.k.a Gramps