Log in

View Full Version : General Screen Resolution Design Question


Markxxx
12-19-2007, 09:47 PM
I personally love the 800 X 600 screen resolution but I realize few people use that anymore.

I have been studying other websites and it seems a lot of them still design for this screen resolution and just use a table to center it if the resolution is higher.

I use CSS for design and know you aren't "Supposed" to use tables.

Now with plain CSS and a site that is heavy in words it doesn't seem to matter much. The sites look good in any resolution, but for example, on one site I did, I used images. In 800 X 600 I can use 2 images across. If I were to go to a higher resolution I could use 3 images across.

Now using CSS it looks great in 800 X 600 but in higher resolutions I am left with a lot of blank space at the right.

So I have two questions, what is the best way to design for different screen resolutions. Should I just design for the higher resolutions and let the 800 X 600 people scroll horizontally?

Should I just use a huge <div> to contain each page and try to center that on the screen, so it looks good in 800 X 600 and just centers the page in higher resolutions. Would that even work? Or is it back to putting everything in a table and just centering that table?

I am looking for ideas and best methods. I perfer to do it right with CSS if possible.

Thanks
jscheuer1
12-20-2007, 04:55 AM
There are various ways of designing a page, many, many ways in fact. Obviously, one would like their page to take up the whole window, and look good in big (high res full screen) windows as well as in small (low res full screen and high res part screen) windows.

Now, if you have an object, like a table or an image, that is wider than the window, there will be a horizontal scrollbar. So you would like to try avoiding that. Other than that, unless you restrict your content somehow, it will wrap in narrow windows and stretch out in wider ones.

Have a look here:

http://www.dynamicdrive.com/style/layouts/

and elsewhere on the web for specific templates you can play with, or make up one(s) of your own.
Markxxx
12-26-2007, 01:59 AM
I guess I see most sites designed like MySpace, in other words at 800 X 600 screen resolution it takes up the whole screen nicely.

But if you have a higher resolution it doesn't fill the entire screen, it just leaves an equal space on the right and left sides. In other words it centers it on the screen for higher resolutions.

Now how do they do this. Do they just wrap everything up in a div container and center that division?

MySpace.Com (the log in page) is a good idea of this. So is the main page for the Chicago Public Library http://www.chipublib.org/ is another example

I guess there is no good way to do it to work for everyone. I find the fluid layout for CSS works great for sites that have words.

I know there is no one right answer I just thought if anyone had any ideas or links they could give me for ideas it'd be fun to play around.

thanks
jscheuer1
12-26-2007, 03:32 AM
If you really want to center a div that will fit on most users 800x600 window, full screen and center on all larger, that's easy:


<body style="margin:0;padding:0;">
<div style="width:788px;margin:0 auto;">

All your stuff goes here

</div>
</body>

To work in IE, this requires a valid URL DOCTYPE as the very first thing in the source code, this (red) is a good one:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
BLiZZaRD
12-26-2007, 02:48 PM
Also note that taking design lessons from myspace is not a wise idea ;)

but yes, as John stated use a div and give that div all your features (font size, padding top, left and right, borders, whatever you need and then use that to center your stuff instead of tables.