SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Centering a page with multiple layers

    I am working on a site design that has multiple layers (i.e. the menu overlaps part of the content's background). This means I have to use absolute positioning to get everything in place, but I then lose the ability to centre the design on the users screen.

    Does anybody know of a way around this?

    For example, is it possible to absolutely position something within a relatively positioned element (container)?

    I'd appreciate any assistance on offer.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Heres a copy of an answer I prepared earlier
    Quote Originally Posted by me

    If you have absolutely positioned elements in your page already then they will need to be placed relative to the parent container. What this simply means is that the surrounding div should be position:relative. You do not need to supply any co-ordinates so it will not affect your page layout.

    The usual way to centre is to use margin-left:auto and margin-right:auto on the div. However , you will also need to supply a width for the surrounding div otherwise it will not centre, so you will need to supply a width large enough to hold your content including borders and padding etc. You will also need the text-align:center hack for ie5.

    Something like this should work:
    Code:
    body {
    text-align: center;
    margin: 0px;
    padding: 0px;
    }
    .central {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 755px;/* adjust to your page width*/
    text-align: left;
    }
    And then after the body tag :
    Code
    <div class="central"> 
    all the rest of your page.....
    </div>
    I've put the hack for ie5 (text-align:center) in the body tag which saves a div. I've also set the central class to text-align:left to counteract the effects of the previous hack.

    Be aware that mozilla will centre the page but will allow the left side of the page to disappear past the left edge of the window when the page is resized. (Ie stops at the left edge and just the right edge reduces etc. You can use a min-width in the body tag for mozilla to make it stop at the edge e.g. body{ min-width-775px}.
    I hope that this all makes sense
    Paul

  3. #3
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, that worked just fine. I was expecting it to be a lot more complicated.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •