3 Replies Latest reply on May 12, 2010 2:50 PM by Zabeth69

    Centering A Website

    drewbie613

      I was wondering how to center my entire website.  I followed the steps on this webpage

       

      http://www.sicanstudios.com/pages/blog/how-to-center-a-website-and-make-it-resolution-inde pendent/

       

      and I could seem to yield good results.  I got it to center my background image but all of my image buttons ie home, about, volumes etc. were still stuck in their original place.

       

      My website is www.grindpaintball.com if anyone would be kind enough to help out.

       

      Any help would be appreciated!

        • 1. Re: Centering A Website
          Zabeth69 Level 5

          You have designed your pages using APdivs, which are a little tricky to use. They will absolutely position to the confines of the closest positioned enclosing element. In your case, this is the viewport of the browser. We can make a new container div with a position declaration to center the lot.

           

          [There is something odd going on with your "Pictures" page...a black text block appears to the right of your main image.]

           

          But, anyway... you can wrap the whole shebang in a centered, position: relative; div, thus styled in your CSS:

           

          #wrapper {width: 1024px; position: relative; margin: 0 auto;}
          

           

          Then 'wrap' your content thus:

          <div id="wrapper">

               <div id="apDiv1">

               /*...all of your other divs are here...no need to repeat them back to you!*/

               <div id="apDiv10">...</div>

          </div> /*end of wrapper div*/

           

          All of your absolutely-positioned divs will then 'position' inside your wrapper div, and the whole lot should then center on any page wider than 1024px.

           

          Adjust the 1024px, if that is not wide enough to enclose all the absolute positioning you have going on.

           

          Beth

          • 2. Re: Centering A Website
            drewbie613 Level 1

            It worked but I am seeing a border of the wrapper around the top left part of my screen.  Check out the pictures page for an example of what I am talking about.  Maybe I placed something in the wrong place? Other than that it looks great thanks for the help!

            • 3. Re: Centering A Website
              Zabeth69 Level 5

              Yes, I see the line...it is different on different pages. Compare the code between a page where it does not appear and one where it does and see what you can figure out.

               

              Beth