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 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Vertically centering the whole site(CSS)...

    It's gotta be possible... I read up on the "vertical-align" feature, but that works mainly for text and you have to use it with the "position" feature, so I still went ahead and played around with it and it doesnt seem to to work for me. All the sites ive found about the vertical-align talk about text and some that do talk about divs aren't working for me... Anyone know how to do this correctly with cross-browser compatibility?

    Here by site by the way: http://splatterbyte.freehostia.com/

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Have a read of the following page : http://www.student.oulu.fi/~laurirai/www/css/middle/

  • #3
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thnx, but Remember I said: I need it to have cross-browser complatibility?
    Yes, I have alreay tried that site and the only method that could possibly work is the "Using padding and negative margin" technique, but even that doesn't seem to show me good results. I definitely need the method to work in IE and ofcourse FF, if it doesn't exactly work that well with other browsers, im still willing to try it. Thnx again...

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This seems to work in FF, not tested in IE.

    .site {
    width: 995px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -300px auto 0 -500px;
    border: 1px solid #000;
    }


    It would be 5px out due to the width being 995px.

  • #5
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    o wow... it works in IE and FF... You are A GENIUS!

    you didn't use any other site as a resource did you?
    Also why are you using

    margin: -300px auto 0 -500px;

    I understand that it is relevant, but I just want to know since I also used the same exact setup without the margin defined as you did and it wasn't working...
    So I understand that you are setting the right margin to auto so it matches all resolutions. but why the top -300px and why the bottom 0... What about the -500px for the left? Are these values continious regardless of the size of the element?

    Thanks ALOT by the way...

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This is a little more accurate. Everything you needed to know was in that link Mark gave you if you read it.
    Code:
    .site {
    width: 995px;
    height: 600px;
    position: absolute;
    left: 50%; /* set as 50%, negative margins put layout back into place*/
    top: 50%;
    margin-left:-498px; /* approx. half the width */
    margin-top:-301px; /* half the height */
    border: 1px solid #000;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I came across thhe linked site when I was researching my self and tried the all the methods, but I see what I was not understanding. I was on the right track since I was looking at the "Using absolute positioning and negative margin" method, but I didnt understand the right way to intergrate the way into my website.

    Code:
    div {position:relative;min-heigth:50px !important;}
    img {position:absolute;top:50%;margin-top:-25px;}
    span{position:absolute;top:50%;margin-top:-0.5em;line-height:1}
    The above code was what I couldn't intergrate correctly into my website.

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, glad you got there in the end!

    As _Aerospace_Eng_ shows in his slightly more accurate example, the left margin is half of the width (in your case it's (995px + 2px border) / 2 = 498.5px (as you can't have half a pixel you have to round up or down)), and the top margin is half of the height (600px + 2px border / 2 = 301px).

    Basically you just have to think of it as moving the div's starting point half way across the page, and then pulling it back half of the size of the div.

    I didn't need to use auto in my example (it was left over from when I was having a little play), margin: -301px 0 0 -499px; would work just as well.


  •  

    Posting Permissions

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