SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Center THIS!

  1. #1
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center THIS!

    Is there an easy way to center an entire site so that it is placed in the middle of the screen for 1024x768 users and full screen for 800x600 users? Similar to:
    http://mediasoftware.sonypictures.com/

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

    There is a complete description on how to centre an existing site in the FAQ sticky thread post 5:
    http://www.sitepoint.com/forums/showthread.php?t=171943

    If the page is already designed then you basically wrap a div around the page with a width to match the page and also give the div a position:relative. This will give any absolute elements in the page a reference point other than the viewport.

    You just use margin:auto to centre the page and text-align:center on a parent (such as the body) for ie5.

    Have a look at the FAQ and if thats not what you meant then just shout

    paul

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sparkie
    Is there an easy way to center an entire site so that it is placed in the middle of the screen for 1024x768 users and full screen for 800x600 users?
    When you say full screen, I think liquid layouts.

    If that's not what you mean then what Paul O'B said is very valid.

  4. #4
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I've already designed a site (I design for 800x600 but use 1024x768), and on my monitor, all of the sites are always aligned to the left, so I'd like to just take the whole layout and center it for 1024x768 but leave it along for 800x600 (since it was designed that way in the beginning).

    Paul, is the example at the bottom of the page what I would need to use in order to do that?
    Sherice Jacob - Web Improvement Expert
    Improve Website Conversions | eBook Covers
    Follow Me on Twitter!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,

    Just this will do:


    FAQ :How to centre an existing page horizontally?

    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.

    e.g.
    Code:
     
    body {
    text-align: center;
    margin: 0px;
    padding: 0px;
    min-width:800px;/* stop mozilla sliding off the edge */}
    .central {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 800px;
    text-align: left;}
    And then after the body tag :
    Code:
    <div class="central"> all the rest of your page.....</div>
    The hack for ie5 (text-align:center) in the body tag which saves a div. You will then need to set the central class to text-align:left to counteract the effects of the previous hack.

    Thatís all you need.


    Paul

  6. #6
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much I appreciate your help!
    Sherice Jacob - Web Improvement Expert
    Improve Website Conversions | eBook Covers
    Follow Me on Twitter!


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
  •