|
| |
|
|
carrie
Posts: 229
From: Port Orange, FL Volusia
Status: offline
 |
liquid center - 8/8/2007 14:01:38
Hi all!
Can anyone help me center this page? Ideally, an equal amount of background would be visibile at the top, left, right, and bottom.
The max-width is thanks to liquid designs on widescreen browsers. The max-width works on higher resolutions, but it isn't centering, and the vertical center is off when you change the browser size.
Any help is appreciated.
Thanks,
Carrie
|
|
|
|
Tailslide
Posts: 5948
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: liquid center - 8/8/2007 14:55:02
Can you give us a link?
To centre a div horizontally you'd add margin:0 auto; to it's style rule.
Vertical centering is very difficult to achieve with pure CSS (mainly because with CSS there's an issue of exactly where the top and bottom of the viewport are which makes measuring the centre difficult).
There's this article: http://www.hicksdesign.co.uk/journal/how-to-vertical-centering-with-css Which shows a CSS method but it's pretty hacky in my view.
You could use a single-cell table to do this too but, again that's not what tables are for so I'd generally avoid this.
The other option would be to use Javascript to centre vertically. I'd tend to take this option myself - without JS on it would harmlessly revert to being top aligned on the page so no harm done.
It's a toughie - hope this helps!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
carrie
Posts: 229
From: Port Orange, FL Volusia
Status: offline
|
RE: liquid center - 8/8/2007 15:02:21
How silly of me! http://www.coastrealty.cc/index3.htm
The centering methods seem to like fixed width objects better.
Carrie
| |
|
|
|
carrie
Posts: 229
From: Port Orange, FL Volusia
Status: offline
|
RE: liquid center - 8/9/2007 9:38:44
Well, I decided to just use a fixed width, it's much easier to center, but without a fixed height, is it possible to center vertically as well with .css? Height would be determined by the content.
Also, I'm getting a vertical scrollbar in Firefox - can anybody tell me why? http://www.coastrealty.cc/index3.htm
Carrie
| |
|
|
|
carrie
Posts: 229
From: Port Orange, FL Volusia
Status: offline
|
RE: liquid center -- in the home stretch - 8/9/2007 11:02:53
Ok, well I went back to the drawing board, gave the div a fixed width, and found a great solution with just one problem, the scrolling in IE.
Can anyone see why? http://www.coastrealty.cc/index4.htm
| |
|
|
|
Tailslide
Posts: 5948
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: liquid center -- in the home stretch - 8/9/2007 11:09:27
At what width is it scrolling? Oh are you talking about height?
edit: on the rule where you've got body, html {height:100%;} if you remove html then the vertical scroller disappears.
< Message edited by Tailslide -- 8/9/2007 11:16:30 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
carrie
Posts: 229
From: Port Orange, FL Volusia
Status: offline
|
RE: liquid center -- in the home stretch - 8/9/2007 11:15:34
The height. On IE 6 1024 X 768 it scrolls down quite a bit, even though the box is in the middle of the screen.
Can you see why it does that?
Carrie
| |
|
|
|
carrie
Posts: 229
From: Port Orange, FL Volusia
Status: offline
|
RE: liquid center -- in the home stretch - 8/9/2007 11:27:56
If I remove that html, then I lose the vertical centering in firefox, and the scroller still appears to me in IE 6.
In IE 7 it is way off - so maybe it's not possible to vertically center a div with no height in all browsers.
Have you seen it done?
Carrie
| |
|
|
|
Tailslide
Posts: 5948
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: liquid center -- in the home stretch - 8/9/2007 11:45:43
Yes it is - here: http://www.littleblueplane.com/test/verttest.html
But it uses a little javascript for the vertical alignment. In this example I'm using % for width and height of the div - but without a height it just assumes it's height from the content in the inner div. With JS off, it reverts to being top-aligned.
Personally I'd use this route at the moment. Centering using CSS would be fine if certain browsers would play along - but they don't and hacks are in my view best avoided to stop problems in the future. I don't like using single cell tables either - personally I think the JS is "cleaner" as it can be removed to an external file and doesn't pollute the markup. I wouldn't normally use JS for presentational stuff but the options are not easy to implement and pretty hacky.
edit: the only effective CSS method I've come across is this one: http://www.wpdfd.com/editorial/thebox/deadcentre4.html BUT it goes horribly wrong if you don't use set widths and heights - so not a great deal of use for you.
< Message edited by Tailslide -- 8/9/2007 12:02:03 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
carrie
Posts: 229
From: Port Orange, FL Volusia
Status: offline
|
RE: liquid center -- in the home stretch - 8/9/2007 13:25:52
This is without a doubt the easiest solution I've seen to date. And clean too!
Thank you, it seems to be the best solution to date.
Carrie
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: liquid center -- in the home stretch - 8/9/2007 18:53:02
OH - that sort of liquid center - never mind
_____________________________
Dan
| |
|
|
|
carrie
Posts: 229
From: Port Orange, FL Volusia
Status: offline
|
RE: liquid center - 8/10/2007 22:59:13
Tailslide,
I implemented the javascript center to this page and it works beautifully, except when I add the second javascript: http://www.getinkpr.com/default-1.asp
If the window is not maximized (on IE7, Firefox on 20-in widescreen monitor), the box will 'stick' to the top of the window, but as soon as you start to resize the window, it moves into the vertical center.
I've confirmed it's a conflict with the other script 'ddmenu-test2.js', but I don't know what exactly is causing the conflict, or if it can be resolved.
Can you see anything that may be causing this problem? After spending so much time to find a solution that will work, I'd hate to revert to a table now.
Thanks,
Carrie
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
You know it was only yesterday when I was just wondering where you'd got to!
