Topic: Vertically centered box......help !!!! Pages that link to <a href="https://ozoneasylum.com/backlink?for=11185" title="Pages that link to Topic: Vertically centered box......help !!!!" rel="nofollow" >Topic: Vertically centered box......help !!!!\

 
Author Thread
BlackKingThanatos
Nervous Wreck (II) Inmate

From:
Insane since: Feb 2004

IP logged posted posted 04-09-2004 16:16 Edit Quote

I'm sorry, but I'm a CSS Newbie...and I have a problem.

I'm trying to horizontally and vertically centered a box with width of 600px and height of 700px, the problem is although I've managed to horizontally centered the box by using negative margin ( margin-left: 350px ), I can't do the same for the vertical centering.

The box seems to overlap the bowser so the bottom border is actually not visible.

I can't show you the site ( coz I haven't upload it yet ) but please help me, can you show me a better way to vertically centered that box, and forgive me for the crappy english, thx !!

BlackKingThanatos
Nervous Wreck (II) Inmate

From:
Insane since: Feb 2004

IP logged posted posted 04-09-2004 16:29 Edit Quote

sorry, here's the CSS code :

/* CSS Document */
body {margin:0px; padding:0px;}
#container {
width: 600px;
position: absolute;
left: 50%;
margin-left: -300px;
border: 1px solid;
margin-top:50px;
height:700px;
top:50%;
margin-top:-350px;
}

Please help, thx !

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 04-09-2004 16:40 Edit Quote

OK, first off, you have two "margin-top" declarations--the "margin-top:50px;" is extraneous, and gets overridden by the next declaration anyway. However, that's not your problem. The technique is sound and should work--in fact, it does work. Your problem is most likely that the height of the div is 700px, and even on a 1024x768 screen, that's going to end up being more vertical space than you have in the browser window.

Try this: reduce the height to 300px (or so), and then reduce the margin-top to 150px. Voila! We have centering.

If you can't get that to work, let me know. You're doing everything right (except for the extra margin-top declaration), so you shouldn't have any problems.


___________________________
Suho: www.liminality.org

synax
Maniac (V) Inmate

From: Cell 666
Insane since: Mar 2002

IP logged posted posted 04-09-2004 16:43 Edit Quote

Your code is pretty messy, so try this:

code:
body {
margin: 0px;
padding: 0px;
}

#container {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 700px;
margin-left: -301px;
margin-top: -351px;
border: 1px solid;
}



You may also want to have a gander at this: http://faq.ozoneasylum.com/841/rating/

*Edit: Oooo, the shockmaster crept one in before me

"Nothin' like a pro-stabbin' from a pro." -Weadah

[This message has been edited by synax (edited 04-09-2004).]

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 04-10-2004 07:50 Edit Quote

Or, to make this layout type liquid, don't declare anything in terms of pixels. This is good for layout with absolute positioning that are only expected to work on one resolution, but it simply doesn't cut it elsewhere. Try declaring the width and height of your box as 50%, then having a margin-top of 25% and a margin-left of 25%. This puts the left hand side of your box a quarter of the browser window out, and so puts the center of your box exactly at the center of the browser window. The same thing goes for the top. This will then stretch vertically if the text overflows it, but still maintaining its position in the exact center of the window, no matter its size.

Justice 4 Pat Richard



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu