...

View Full Version : Vertically centering the whole site(CSS)...



stickfigure
11-02-2006, 09:47 PM
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/

mark87
11-02-2006, 10:22 PM
Have a read of the following page : http://www.student.oulu.fi/~laurirai/www/css/middle/

stickfigure
11-02-2006, 11:01 PM
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...

mark87
11-02-2006, 11:10 PM
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.

stickfigure
11-02-2006, 11:27 PM
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...

_Aerospace_Eng_
11-02-2006, 11:37 PM
This is a little more accurate. Everything you needed to know was in that link Mark gave you if you read it.

.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;
}

stickfigure
11-02-2006, 11:56 PM
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.


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.

mark87
11-03-2006, 12:05 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum