Quote:
Originally Posted by William
Thanks, something new to me and easy, like I say on my about page, its a learning experience, and I am still learning.
cass_is_awesome and H, I appreciate the hints.
|
No problem.
Just to kind of break down what it does, in case you or anyone else didn't know:
Let's say, for the sake of argument, that we're working with an 800 pixel box named "box"
Code:
.box{
width : 800px;
height : 400px;
position : absolute;
left : 50%;
Obviously, this positions the left edge of "box" 50% of your screen resolution away from the left edge of the screen.
Code:
margin-left : -400px;
}
or
Code:
margin : 0 0 -400px 0;
}
Takes the left edge of "box" and shifts is to the left by exactly one half of it's width, thus centering "box" perfectly in the horizontal center of the screen, regardless of whether the browser is in full screen, windowed mode, or screen resolution.
Also, if you're going to be using a background image in the body{} section of your CSS, make sure to position it to top center, that way, it will react the same way as your container that's centered in the screen.
Fun stuff.