|
| |
|
|
RickP
Posts: 659
Joined: 11/13/2004
From: Kent, U.K.
Status: offline
 |
Vertical aligning the whole page... - 10/29/2005 10:05:24
It seems there is such poor support for vertical-alignment in lots of ways but can anyone tell me a good method to vertical align a fixed height main containing div/table/whatever so that the entire site will have an equal top and bottom margin.
E.G. let's say I want my site to fit in a container of 500px high - this would about fill up the average 800x600 screen (allowing for toolbars etc.) but would leave 1 - 200 px of vertical space on a 1024 x 768 monitor - I want that spare space to be in the form of an equal top and bottom margin.
Any offers?
_____________________________
Regards, Rick
On-The-Web-Now!
|
|
|
|
RickP
Posts: 659
Joined: 11/13/2004
From: Kent, U.K.
Status: offline
|
RE: Vertical aligning the whole page... - 10/29/2005 10:36:04
It's very sad replying to one's self I know (!)... but just thought I'd add my latest findings but maybe someone else can steer me better (?)
It seems the answer lays in using table layout rather than divs (I'll duck now, I know folk get very protective of non-table layout!). It seems also that the answer lays in not using "vertical-align: middle" at all but just setting table height to 100% (or maybe slightly less as I keep getting a vertical scroll bar!?) and just leaving the table cell default alignment as it is - middle.
If anone knows of a 'better' (in any sense) method please do say still
_____________________________
Regards, Rick
On-The-Web-Now!
| |
|
|
|
RickP
Posts: 659
Joined: 11/13/2004
From: Kent, U.K.
Status: offline
|
RE: Vertical aligning the whole page... - 10/29/2005 15:35:56
quote:
#container
Caz
I tried making both the #centerwrap & #content 100% but it leaves a large left margin still - is this what you meant or do you mean add another outer containing div?
The problem seems to lay here:
/* commented backslash hack - invisible to IE 5 \*/
#centerwrap {
position:absolute;
margin:-210px 0 0 -360px;
left:50%;
top:50%;
}
/* end hack */
Which no doubt will lead to other probelms if altered (?)
_____________________________
Regards, Rick
On-The-Web-Now!
| |
|
|
|
caz
Posts: 3468
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: Vertical aligning the whole page... - 10/29/2005 15:43:04
You could just change to
left:0;
and see what effect it has.
But if you are using a template, why are you trying to change it so radically? I would just build my own and learn from the procedure, you just don't know what effect your changes will have and in the end it might be quicker to start from scratch. At least then you will know why things are as they are.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
d a v e
Posts: 4010
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Vertical aligning the whole page... - 10/29/2005 16:20:59
i think part of the problem is that you want to centre it in something that is a bit abstract/variable - afterall, as far as browser rendering goes is it centre of the viewport or centre of the page?!
as soon as you try to do something that is print media orientated (i.e. a fixed appearance but in a fluid environment) it is prone to instability, inconsistency or just plain failure :)
it's nothing to do with 2005 just the way the web wants to work ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
Kitka
Posts: 2507
Joined: 1/31/2002
From: Australia
Status: offline
|
RE: Vertical aligning the whole page... - 10/29/2005 20:24:33
For a box or wrapper with fixed (absolute) dimensions this method works well:
http://www.wpdfd.com/editorial/thebox/deadcentre2.html
_____________________________
Kitka
**It is impossible to make anything foolproof because fools are so ingenious.**
| |
|
|
|
RickP
Posts: 659
Joined: 11/13/2004
From: Kent, U.K.
Status: offline
|
RE: Vertical aligning the whole page... - 10/30/2005 3:37:36
quote:
ORIGINAL: d a v e
i think part of the problem is that you want to centre it in something that is a bit abstract/variable - afterall, as far as browser rendering goes is it centre of the viewport or centre of the page?!
as soon as you try to do something that is print media orientated (i.e. a fixed appearance but in a fluid environment) it is prone to instability, inconsistency or just plain failure :)
it's nothing to do with 2005 just the way the web wants to work ;)
Hi Dave - but we don't have any trouble centering things horizontally on the web - despite all the varying screen resolutions - and we have a variety of ways to do that. "Vertical-align: middle" is official W3C standard CSS 1 yet it doesn't seem to work on much!
_____________________________
Regards, Rick
On-The-Web-Now!
| |
|
|
|
d a v e
Posts: 4010
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Vertical aligning the whole page... - 10/30/2005 3:46:10
no but the sides of the viewport and the page are the same i.e. they are at the side of the screen! whereas the end of the page can be the viewport or the page/outer continaing div (whcih could be several pages long): the sides of the screen are, well, the sides of the screen, whereas the top/bottom can be the top/bottom of the page or the viewport. (hence problems arise when you resize text!)
as fas as i understand it the vertical-align:middle seems to apply to table cells, otherwise it would be a lot easier for you to do this vertically, as it would be to do it horizontally
anyway, good luck! :)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4010
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Vertical aligning the whole page... - 10/30/2005 13:23:43
i suppose you could always use a 'letterbox' frameset with the middle frame continaing the content and probably using an incomplete doctype or none would work??
_____________________________
David Prescott
Gekko web design
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Vertical aligning the whole page... - 10/30/2005 14:46:44
quote:
ORIGINAL: RickP
not to mention the official warnings from the doctype policing department!
And that would be who...?
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
RickP
Posts: 659
Joined: 11/13/2004
From: Kent, U.K.
Status: offline
|
RE: Vertical aligning the whole page... - 10/30/2005 14:59:04
quote:
ORIGINAL: Tailslide
quote:
ORIGINAL: RickP
not to mention the official warnings from the doctype policing department!
And that would be who...?
Er, hmm, er, well, not quite sure really, but no doubt the folks who do that kind of job are real civic-minded, good public citizens... er, who care... and... are nice - well, in a policy kind of a way... I'll stop now...
_____________________________
Regards, Rick
On-The-Web-Now!
| |
|
|
|
RickP
Posts: 659
Joined: 11/13/2004
From: Kent, U.K.
Status: offline
|
RE: Vertical aligning the whole page... - 11/10/2005 15:07:17
Thanks again for help & suggestions with vertical alignment a couple of weeks ago now. I've just posted the relevant site for critique here - the two 'galleries' were what I was trying to improve upon with the fixed vertical layout...
_____________________________
Regards, Rick
On-The-Web-Now!
| |
|
 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 
But thanks for all help 
, except I wasn't envisioning it to be used with such small dimensions as shown in that example. Something more like 700 x 500 with overflow: scroll in the style to cope when the text becomes too much for the box. 
