Css Resolution Support

[[dx]]

Hi there,I'm makeing some web with css support. Page is designed for 1024 x 768 and when I move resolution to 800 x 600 everything is F..... UP. How can I make support for lower and higher resolutions with one css file..Regards

[Synook]

Well, not many people use 800 by 600 so you don't need to worry about that resolution too much...But if you want, you can make you design fluid-width, that is variable width, by giving the containers non-fixed width with margins to seperate them instead.

div#container {	margin:20px;}

[piotr]

make the width if the main containers you have stuff in, percentage% instead of fixed. and you can always use min-width:xx Of course then you gonna remember that if you put inside these containers too wide elements, they will normally not let it to be thinner and layout will go bad if window too thin. Such elastic designs arent the simplest of all, but if you design a site fixed 1000px wide, then people with resolution above 2048 will ask themselves why the heck half of their screen is unused.

[jeffman]

There are really two schools of thought here, and both are amply supported by websites developed by major corporations, universities, etc. Neither is right or wrong, I think, so long as the designer is consistent.The first school we can call The Container School. The idea is to choose a fixed width, like 800px, and put all or most of the site's content into a div of that width, usually centered in the window. A variation on this is to create an attractive (but not distracting) background for the entire window. This way, the user with a large screen doesn't feel like so much real estate is being wasted. One advantage to this kind of design is that, knowing the exact width of the container, the designer can size and place elements with pixel precision. Container designs (when done well) have a very crisp feel, like a well-designed newsletter.The second school we'll call The Whole Window School. Designers belonging to the school use all the available space. Good designers take into consideration the fact that different clients will have different screen resolutions. Working with percentages is crucial to such designs, as this allows containers to size themselves to the window. The CSS float property is also important, and allows for a lot of creativity, as it allows elements to be anchored to the left AND right edges of the window. As the window is resized, the elements move toward the center, whose exact width remains somewhat fluid. The so-called Holy Grail is an excellent starting point for anyone wishing to design in this matter.I think the worst mistake a designer can make is to design with a slightly odd, large resolution in mind. I believe 1024px is the most common screen width today, so designing for 1024px is a pretty harmless thing to do. Designing for 1280px or 1344px would be a huge mistake, especially when this means large page elements of fixed width, and even more so when it involves a lot of absolute positioning (a tool that should be used sparingly). At work I have 1680px, so I am at times slightly bothered by very small designs. But at home I have 1024px, and I get REALLY ANNOYED when I run across a site that forces me to use my bottom scrollbar to see what's going on. I think most users would agree, and they probably do what I do: leave and not come back.

[jlhaslip]

Thanks Dad.That is about the best description of the Screen Width issue and its cure that I have ever read.

[System]

Thanks Dad.That is about the best description of the Screen Width issue and its cure that I have ever read.

Currently I am just in the process of creating one website and I made the decision when started that it would be best to design in a 750px wide box for a collective business site. What it is is the "enterprise" is a company that is made up of other smaller companies that provide different services which are all linked by the enterprise company. The opening site, for the enterprise portion, would be a rather simple site that links off to the separate businesses. This opening site would be 750px and centered on the screen. Now that I have taken a break from the project(it is for my brother) and picked it back up, several months later as uncontrollable issues put the project on hold, I am trying to decide what the best design philosophy would be for the project.Resolutions is only a small portion of the project, but it is something that has put things on hold until I can decide which is the best way to go. At least three sub companies will make up the enterprise so I need to think about what is best for the owner, the companies and myself while designing these pages. Should I stick with the 750px for the main site and the individual sites, 750px for just the main site, or a more fluid and/or larger layout for all of them?I wish my brother would just tell me what he wants and I would work with that, but it seems all decisions have been left entirely up to me and I don't feel I have an adequate grasp on what would be best.System

[SmokingMan]

I have often wondered what screen width is the most common in use today. I use 1024 x 768 at home. Has there been any studies as to what the most common resolution being used today is? How many people are still out there using 15" or 17" monitors and use the 800 x 600 resolution? I would love to see some data on that.

[jeffman]

How many people are still out there using 15" or 17" monitors and use the 800 x 600 resolution? I would love to see some data on that.

Google is a wonderful resource. If you don't want to follow the links, the consensus is that 1024 dominates the market at roughly 45%. 800 x 600 is hanging it at roughly 5%, which is still a huge number of people. Whether it's huge enough or represents your own market is your guess, not mine. If your business is a private club that sells mixed drinks for $15 each, then your clientele are not surfing at 800px. If your business is a lawnmower repair, then maybe they are.Like all browser trends, this one is changing. Higher resolutions are on the rise. Unfortunately, several are on the rise, and I have no reason to believe we'll be settling on just one for a while. Video cards support just about anything, and competition among LED manufacturers seems very high. Fewer and fewer people are buying the first computer, so CPU and monitor purchases may not coincide. In time, I suspect we'll all converge at something like 1600, but that's very much a gut feeling.http://www.tamingthebeast.net/blog/web-dev...istics-0208.htmhttp://www.w3schools.com/browsers/browsers_display.asphttp://www.thecounter.com/stats/2008/December/res.phphttp://blog.merge.nl/2008/09/15/screen-res...ion-statistics/

[jlhaslip]

Don't forget that the Statistics may be 'skewed' according to the sources provided by DD up there. For example, the w3schools site attracts a different client than the other ones. W3school visitors are more tech savvy and are likely to have different equipment than the other links, so what you might want to do is write a script the checks visitor monitor sizes and record the stats for the site you are working on. Then you will have the precise information to size the site better as time goes on.Personally, I design for 1024 (100px width) while I also check it in 800 and 1280 to make sure it doesn't blow up on me.

[jeffman]

Don't forget that the Statistics may be 'skewed' according to the sources provided by DD up there.

That's why I provided multiple links.

what you might want to do is write a script the checks visitor monitor sizes and record the stats for the site you are working on. Then you will have the precise information to size the site better as time goes on.

But this is the ideal solution.