4 Replies Latest reply on Apr 29, 2010 9:20 AM by Nancy OShea

    Centering Web Site

    Traveling Person Level 1

      Learning CSS and if I use multiple Layout/Divs (using absolute positioning) to put together web site laout I want , how can I center the finished site that will work for all browsers?

      Thanks

        • 1. Re: Centering Web Site
          Nancy OShea Adobe Community Professional & MVP

          1) APDivs are not a good approach.  You can't center APDivs because they are absolutely positioned relative to the browser's top left border.

           

          The best advice I can offer you is to learn to use default CSS positioning (which is no positioning at all) along with margins, floats and padding to align elements on your pages.

           

          Even better, get yourself a good CSS layout as a starting point.  If you're looking for a Grid Framework, look at http://EZ-CSS.org and watch the video.

           

          2) to center a web page you need 3 things:

               a) a valid document type,

               b) a container width in pixels, ems or percentages,

               c) margin-left and margin-right of "auto".

           

          EXAMPLE CSS:

           

          body {

          width: 900px;

          margin: 0 auto; /**centers on screen**/

          text-align; center; /**for older browsers**/

          }

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          1 person found this helpful
          • 2. Re: Centering Web Site
            Traveling Person Level 1

            Based on Nancy O's answer, another question. I have played with one of the standard CSS Style Sheets and I can center layouts in the body but cannot see how to reference to the left or right side of the web page, i.e. the width of the body is say 1000px. Can I tie to body instead of using absolute?

            thanks

            • 3. Re: Centering Web Site
              martcol Level 4

              Your question isn't entirely clear to me but I'll have a go and see if I haveit.

               

              First off, avoid the use of position: absolute if you can.  If you are learning CSS/HTML/DW position: absolute might bite you well, nip anyway.

               

              Once you have your center layout you can create "white-space" between elements using padding and margin.

               

              Once you start adding padding and margin you will need to consider the Box Model and the implications there.  So if you want content to stay 20px away from the left side of your container you can use:

               

              #container {

                   width: 860px

                   margin: 0 auto;

                   padding-left: 10px

              }

               

              Martin

              • 4. Re: Centering Web Site
                Nancy OShea Adobe Community Professional & MVP

                For more specific answers in this forum, you should upload your test page to your remote web server and post a URL for us to see.  In the meantime, the following link might help get you started.

                 

                3-Col, Fixed-Width, Centered Layout (view source in browser to see the code)

                http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                http://alt-web.com/
                http://twitter.com/altweb
                http://alt-web.blogspot.com