5 Replies Latest reply on Apr 8, 2010 3:02 PM by jasperimage66

    PLACING WEB IN CENTRE

    jasperimage66

      I have created my own web site - www.just-simple-web.com

       

      All pages of the site are created using various AP Div sections from a blank HTML page.

       

      I was wondering how I can get everything int the centre of browser.

       

      Thanks

        • 1. Re: PLACING WEB IN CENTRE
          martcol Level 4

          I haven't looked at your page but just a quick response here.

           

          You could Google "center layout CSS" or something close to that and I bet you'll find heaps of tutorials and very easy to grasp.

           

          The main principle is to stick everything in a containing div, call it id="wrapper" or something, and then in your CSS give it a width and put margin: 0 auto;

           

          The CSS uses auto values for left and right margins this will put the div in the center of the browser and distribute the remaining space between the left and right margin.  You also have to watch text-align center thing to help IE6 along the way but that will be explained in any of the numerous tutorials.

           

          Hope that cracks it.

           

          Martin.

          • 2. Re: PLACING WEB IN CENTRE
            Nancy OShea Adobe Community Professional & MVP

            You can't center APDivs because they are absolutely positioned.  That means they are fastened to points relative to the top left corner of browser viewport. I might add here that APDivs pose many challenges for newbies.  Don't use this as a primary layout method until you fully understand how APDivs work.

            http://apptools.com/examples/pagelayout101.php

             

            My advice is to scrap the layout you have now and rebuild it with default CSS positioning (no positioning at all).

            Learn to use floats, margins and padding to align elements on your pages.  If you do that, it's simple to center your page on screen.  Place content inside a #container division.  Give it a width in pixels or percentages and margin-left and margin-right of auto (browser default).

             

            CSS:

             

            #container {

            width: 900px; /**width in pixels or %**/

            margin: 0 auto: /**centers page**/

            text-align: center; /**centers older browsers**/

            }

             

            HTML:

            <div id="wrapper">

            page content goes here

            </div>

             

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

            • 3. Re: PLACING WEB IN CENTRE
              jasperimage66 Level 1

              I have had a play about with a WRAPPER and contained everything within this.

               

              This does centre its contents and I have inserted DIV TAG 's etc.

               

              This does work for me, but I will have a few lessons to go through.

               

              Thanks

               

               

              Brian Smith

               

              www.jasperimage.co.uk

               

              www.just-simple-web.com

               

               

              Tel: - 01343 540831

              • 4. Re: PLACING WEB IN CENTRE
                martcol Level 4

                Well done Brian,

                 

                Nancy O's advice is certainly worth considering regarding using absolute positioning.

                 

                Much better I think, to use floats and careful use of padding/margins.

                 

                It's feels pretty complex when you start learning this stuff but there's a logic to it all, good reasons for doing it and it does get eaier.

                 

                Martin

                • 5. Re: PLACING WEB IN CENTRE
                  jasperimage66 Level 1

                  Thanks Nancy

                   

                  Just played about and got a page in centre and used a wrapping to contain loads of DIV'S and a table.

                   

                  Looks good.

                   

                  Cheers

                   

                   

                   

                  Brian Smith

                   

                  www.jasperimage.co.uk

                   

                  www.just-simple-web.com

                   

                   

                  Tel: - 01343 540831