13 replies [Last post]
mrb1972
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-12-11
Posts: 27
Points: 0

Hi,

Is it possible to center a page, width and height so its always in the center no matter what screen size the browser it running.

http://www.avmechanic.co.uk/help/help2.html

As you see from the link above the page centers ok width wise, but not vertically..

is this possible to acheive??

P.S Im a CSS newbie so please excuse me if its something obvious

thanks

Rajio
Offline
Regular
Last seen: 16 years 41 weeks ago
Timezone: GMT-5
Joined: 2005-12-15
Posts: 14
Points: 0

centering a page.

clicking that brings up an error. is the URL right?

also:

Quote:

width wise, but not horizontally..

:?:

im guessing you want something vertically and horizontaly centered in the browser window, right?

from what I understand, vertical centering doesnt 'work' but you can kindof do it sortof... is the thing you want centered of fixed height?

I was feeling lucky (with respect to google) and dragged this up for you:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

centering a page.

It has been discussd here often so a search for something like 'centering layout vertically' should throw up some useful threads!

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 47 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

centering a page.

Hi

This is what you want, but, beware, if the browser size is smaller than the box, it slides off the page!

Dead Centre

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

centering a page.

'Dead Centre' is one example as is using a single table cell or even possibly the display table and table-cell properties of CSS, but have a search for the threads on this forum as you will find a lot of archived help.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mrb1972
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-12-11
Posts: 27
Points: 0

centering a page.

thanks for your feedback so far,

i made a type error with my url , it should be http://www.avmechanic.co.uk/test/test2.html

anyway i will try some of the suggestions you all have made.

thanks

mrb1972
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-12-11
Posts: 27
Points: 0

Firefox alignment

hi again

ok ive been playing around with vertical centering and i think im very close now, just have a small problem and im hoping someone will be able to spot the problem.

http://www.avmechanic.co.uk/test/center.htm

Ive tested it at 1024x768 which seems ok, if anyone can check it at a higher screen size (my laptop wont go higher) , does it center ok still.

The other slight problem is in firefox, the right hand side is slightly out of line with the header and the header bottom line is missing.

any guidance would be appreciated..

thanks

tamarab
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-07-28
Posts: 36
Points: 0

centering a page.

At 1600x 1200 & Safari you screen looks like attached.
Wish I could help you but Im a newbie too. Laughing out loud

Sorry about the poor saving quality - only way I could get it down to 64k to post on the site..

Looks like your menus dont work in Safari to me.

mrb1972
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-12-11
Posts: 27
Points: 0

centering a page.

thanks, same problem with the borders then.. so far only IE is displaying it properly..

so close, yet so far Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

centering a page.

I was going to ask why you were working in quirks mode and using position absolute, but I see you have changed your whole approach and generated a new layout without the single table cell, so your not centering the layout now ? your borders are working so is that, thread resolved then ?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mrb1972
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-12-11
Posts: 27
Points: 0

centering a page.

hi,

no its not resolved , I have tried a new approach due to the fact i needed to try and get vertical alignment on the layout, i found an example of a way of doing it using a table.

As you can see its sort of working but the layout is a bit wrong ff, ok in IE thought.

Im think im getting myself tied up in knots abit here!!

redsmurf
redsmurf's picture
Offline
Regular
Last seen: 14 years 41 weeks ago
Joined: 2005-08-05
Posts: 18
Points: 0

centering a page.

The reason the bottom border on the header is not showing up is because the left and main columns are covering it up, I would stay away from position:absolute and use the natural flow of the html to position everything. Like this:

<DIV class=container>
<DIV class=header>header</DIV>
<DIV class=leftcol>left</DIV>
<DIV class=maincol>main</DIV>
<div class=left_footer>footer</div>
<div class=right_footer></div>
</div>

And the right side alignment if you take a pixel or two off the header it lines everything up. I think it has something to do with the borders.

If you take a look http://www.cbtofms.com/test here.

I am just starting out with CSS but I hope I have helped a little.

May the Lord ever keep you in the palm of His hand, and may He never make a fist.

mrb1972
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-12-11
Posts: 27
Points: 0

centering a page.

thank you, thats seems to be perfect now.. thanks for your help

redsmurf
redsmurf's picture
Offline
Regular
Last seen: 14 years 41 weeks ago
Joined: 2005-08-05
Posts: 18
Points: 0

centering a page.

Your very Welcome! Glad I could Help! Happy Holidays!!

May the Lord ever keep you in the palm of His hand, and may He never make a fist.