Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering a page when Absolute positioning is used

    OK I am going to try and explain this as best as possible. My page is completed and done in CSS. I am trying to center my page using CSS also but since I used all div's and absolute positioning throughout the whole page I can't seem to get it to center correctly. Is this possible since I already used div's and absolute positioning to create my page. There is example online at: http://www.ultimatevanessa.com that can be used but how would I go about centering a page like that? Help!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,865
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Wow, I’m really wondering that your page works at all because you’ve currently got 173 errors in your HTML…
    And your page is a good example of the use of absolutley positioning in a slightly wrong manner. A classical case where the programmer hasn’t undrstood the concept of absolute positioning.

    But anyway… I can’t promise it will work but usually to center a page one would put the entire content in a wrapping div (called “wrapper” or “container”) which will be given a specific width and centered with margin: auto;. You could also do this with the body element itself, though.
    In your case it’s probably also necessary to position that wrapper relatively, otherwise the absolutely positioned elements would stay at the side anyway.

    So in a nutshell:
    Code:
    body {
      width: ???px;
      margin: auto;
      position: relative;
    }
    And by the way: Your code is far from being semantic. Again, that page is a classical case of the misconception that with absolute positioning you can put any element anywhere on the page. Just because you can doesn’t mean you have to. And also you are encouraged to separate the CSS and the HTML (and the JavaScript), i.e. to put it in separate files to clean up the code.

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. I added a bit more information to the code you left and it worked perfectly. The new page that I created has an external stylesheet, a new design and a lot less code...lol. The page that is currently up was my first try at css so I am sure it had a lot of mistakes or easier ways of doing things. But I did take into consideration everything you said so I will go back over the new page that is not up yet and make sure that things are a bit more organized and put together. Again, thanks.

  • #4
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    You could also use this, works in IE6, whereas margin: auto; doesn't.

    <style type="text/css">
    .box {
    width: 80%; /* width of the container box */
    position: absolute;
    left: 50%; /* the box is now starts at the center of the window */
    top: 5%; /* not required: just for good measure */
    margin-left: -40%; /* half the width to correct the center */
    }
    </style>
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #5
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by BWiz View Post
    You could also use this, works in IE6, whereas margin: auto; doesn't.
    I'm pretty sure it does exist. Maybe IE handles it strangely, but I know this works:
    margin: (top margin) auto (bottom margin) auto;

    I know it works because I've used it, and it works in FF, IE6, IE7, Opera, and Safari.

    You could try applying that style to the body tag, or just put a container div around everything and apply the style to that.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,865
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Quote Originally Posted by BWiz View Post
    You could also use this, works in IE6, whereas margin: auto; doesn't.
    That’s wrong. IE does understand and correctly apply margin: auto; but only in standards mode, i.e. with a correct and complete doctype at the top of the document (and nothing before that). It’s only IE’s quirks mode where it doesn’t work.


  •  

    Posting Permissions

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