Vertical aligning the whole page... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

RickP -> 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?



RickP -> 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



jaybee -> RE: Vertical aligning the whole page... (10/29/2005 10:42:27)

You mean like this?

Not a table in sight



caz -> RE: Vertical aligning the whole page... (10/29/2005 10:42:31)

I use fluid design and would do something like this 

#container {margin: 5% auto; width:60%;}


You would have to translate that into pixels of course.[;)]



RickP -> RE: Vertical aligning the whole page... (10/29/2005 14:41:00)

Thanks Caz/Jaybee

The page you reference Jaybee certainly does vertically align using divs only, but... it seems like a lot of hacks to me - still no sign of the obvious "vertical-align: middle" - still, that's fine so long as it works but I am always worried that one day all the problems will be fixed and all the previous hacks will cause all the problems! [:D]

Anyhow, I want to span the page 100% and I can't seem to get this div only method to work to that end at present (?)

here's the idea in table format - it does have one 'hack' - if I set the table height to 100% it brings up scroll bars - so 96% seems to be the best I can get away with - I don't mind the odd 4% inaccuracy but now I get a problem if I use the strict doctype (which I prefer to work to) so the only way to get it to display okay is as 'transitional'.

Any more thoughts on how to make either method work 100% across the screen? (as a strict doctype)



caz -> RE: Vertical aligning the whole page... (10/29/2005 15:16:24)

quote:

ORIGINAL: caz

I use fluid design and would do something like this 

#container {margin: 5% auto; width:60%;}


You would have to translate that into pixels of course.[;)]


width: 100%;
margin: 5% 0;



RickP -> 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 (?)



caz -> 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.



RickP -> RE: Vertical aligning the whole page... (10/29/2005 15:52:50)

quote:

I would just build my own and learn from the procedure


Indeed! - All I want to do is simply vertically align (to center) a page layout - you would think that such a design should be easily achieved in 2005 - but it doesn't seem to be the case! [&:] But thanks for all help [;)]



d a v e -> 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 ;)



Kitka -> 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



caz -> RE: Vertical aligning the whole page... (10/29/2005 20:39:36)

Nice one Kitka, but there is a problem when the text is resized via the browser ( in Fx anyway).


[image]local://upfiles/3479/922B8A85B7E546448B281DD517EC7260.jpg[/image]



Kitka -> RE: Vertical aligning the whole page... (10/29/2005 20:51:53)

Well yes [>:], 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.

Wouldn't that manage with larger fonts? [8|]



RickP -> 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!



d a v e -> 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! :)



RickP -> RE: Vertical aligning the whole page... (10/30/2005 4:59:52)


quote:

ORIGINAL: Kitka

For a box or wrapper with fixed (absolute) dimensions this method works well:

http://www.wpdfd.com/editorial/thebox/deadcentre2.html


Thanks Kitka - I think that has shown me the way for what I want to do [;)]



jaybee -> RE: Vertical aligning the whole page... (10/30/2005 7:51:11)

quote:

as fas as i understand it the vertical-align:middle seems to apply to table cells,


Correct, valign only applies to table cells.



jaybee -> RE: Vertical aligning the whole page... (10/30/2005 7:55:29)

quote:

http://www.wpdfd.com/editorial/thebox/deadcentre2.html


That's the one I was looking for earlier but I'd lost the bookmark. Thanks Kitka.

It does pretty much the same thing as the one I posted up top but without the overflows and the instructions are clearer.



Donkey -> RE: Vertical aligning the whole page... (10/30/2005 8:32:13)

Just an observation, but I don't see the point in vertically centering the content of a non-fluid page. It will only 'look right' in whatever screen resolution you design it in. As soon as someone with a smaller or larger screen views it, or the viewer changes the font size, your efforts have been wasted.

The solution shown by Jaybee above works to a point, but if you increase the text size you have to scroll the box vertically to read it so why not make a normal page and simply scroll the page?



RickP -> RE: Vertical aligning the whole page... (10/30/2005 12:51:57)


quote:

ORIGINAL: Donkey

Just an observation, but I don't see the point in vertically centering the content of a non-fluid page. It will only 'look right' in whatever screen resolution you design it in. As soon as someone with a smaller or larger screen views it, or the viewer changes the font size, your efforts have been wasted.

The solution shown by Jaybee above works to a point, but if you increase the text size you have to scroll the box vertically to read it so why not make a normal page and simply scroll the page?


Ah, well that's a question of exactly how the feature fits with the design (or vice-versa!). I'm about to revamp a site (two in fact that have a common design feature) - deliberately side-scrolling layout! - I know, I know, we spend most of our time trying to avoid a horizonatal scroll bar and here I am busy about making it happen! I'll post the first revamped site in the critique forum in a week or two and then you can see why I want to vertically align the entire site in a fixed height (not width) layout. I know it sounds weird but I have two happy clients that like their sites that way! [;)] [:D]

Thanks for all help - I think I'm on the way now [:D]



d a v e -> 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??



RickP -> RE: Vertical aligning the whole page... (10/30/2005 14:07:49)

quote:

an incomplete doctype or none


Hhhhhhhh!!!! (sharp intake of breath!) - I couldn't do that Dave, I'd start getting my mailbox full of hate-mail from FP forum mainstream adherents (not to mention the official warnings from the doctype policing department!)

[sm=fie.gif] [:D]



d a v e -> RE: Vertical aligning the whole page... (10/30/2005 14:08:35)

lol [image]http://www.frontpagewebmaster.com/image/image.aspx/s2.gif[/image]



Tailslide -> 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...?



womble -> RE: Vertical aligning the whole page... (10/30/2005 14:51:18)

/pins on deputy's badge

"Did someone mention doctypes? Reporting for duty Tailslide ma'am!" [:D]



RickP -> 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...
[sm=innocent.gif]



jaybee -> RE: Vertical aligning the whole page... (10/30/2005 16:12:16)

Crawler!



RickP -> RE: Vertical aligning the whole page... (10/31/2005 5:27:59)


quote:

ORIGINAL: jaybee

Crawler!


No - just expressing my sincere appreciation of such dedicated folk [8D]



RickP -> 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...



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375