formatting page designs with CSS

delee36 posted this at 20:33 — 12th April 2007.

Joined: Apr 2007

There are two things that really bug me about some websites...

1. when it is too big for my window and I have to not only scroll up and down but left and right to read the information.

2. when a website, perhaps designed for a 600x800 resolution, ends up all squashed against the left ( or right) side of my screen with a junk load of dead space on the side.

I prefer sites be centered in the window...even if they are small ( 600x800)...I know this is done easily with tables...but how do you pull it off with css?

I have noticed some css sites that seem to fit all resolutions. Is this done with different versions of the same page programmed for different screen sizes? or is there a trick I am missing?

My old site just had different versions for different screen sizes and it loaded the appropriate version...is this still the way that is done?

Megan posted this at 12:55 — 13th April 2007.

She has: 11,421 posts

Joined: Jun 1999

There are a couple of different ways do do designs that are flexible in CSS. Actually, you could probably just do a google search for "Flexible layout, CSS" and come up with a bunch of ideas.

To do a design centered on a page, you just need a container div for the whole site deisgn. The CSS for this Div would look something like this:

#container {width: 760px; margin: 0px auto;}

The auto left/right margin will automatically adjust the margins so the design is centered in the screen.

CSS sites that fit all resolutions are usually like that because the designers have been smart about the way they are built. Most designers would never, ever have different versions of the page for different screen resolutions. There are many ways you can get around this problem without resorting to detecting screen resolutions.

Megan
Connect with us on Facebook!

delee36 posted this at 13:47 — 13th April 2007.

He has: 4 posts

Joined: Apr 2007

Thank you...
see now I should have thought of that! LOL!