SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning content in center of page

    Hi there,
    I've been trying to develop a site where the page content is centered in the middle of the page. I think I'm going mad as some of my page seems to do this but not all of it.

    I'm updating somebody's website for them, initially it was built in tables but due to other layout issues someone suggested I use CSS instead which I have tried to do. I've overcome the initial problem but now have been faced with this one!

    www.pavanehighgate.co.uk
    I've attached the website address and the CSS code that I've used so if you think you can help, have a look and any suggestions would be greatly appreciated!

    Thank you for taking the time to read this!

    Katie

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    To center the page You need to add this to your css:

    Code:
    body {
      text-align: center;
      }
    
    #wrapper {
      margin: 0 auto;
      width: xxxpx;
      text-align: left;
      }
    and see this link for an explanation:

    http://www.simplebits.com/notebook/2...centering.html

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your advice here... i've added the above to my css but it still doesn't seem to be working.

    It seems strange because the logo is centered perfectly, but that is about it.

    I'm ready through lots of info so am hoping to come across the answer soon!
    Thanks again.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean the nav's not centred in IE? Try adding text-align: center; to #topnav ul.

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The nav's not too bad... it's the two columns that display the content and the <hr> that aren't centering.

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, gotchya now - the page looks OK at 1024 x 780. It's because you've used abolute positioning for your columns. Better to use float: left on them instead.

  7. #7
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hooray! the columns have now centered and I've done the same for the <hr>.

    It's looking so much better! Thank you v much.

    I'm not really sure what the float does... like you when i originally tested at 1024x780 it looked fine so i only noticed when i had a look at it on someone else's screen. presumable the float will still keep it the same on other screen sizes?

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The floats let block level elements occupy the same horizontal plane and takes the elements out of the flow of the document. Position: absolute also takes them out of the flow of the document but it also means you have to give them coordinates from which they take their position. The left values you'd used were fine at 1024 but obviously not at 800. Also, the columns were taking their starting point as the top left of the window rather than the container. Floats don't take left, top etc coordinates (although you can affect their position with margins), so they stayed within the container.

  9. #9
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool.. thanks for your help, i would certainly have torn my hair out by now if you hadn't replied!


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
  •