View Full Version : Screen Resolution advice

Dec 2nd, 2009, 09:18 PM
I am new to making websites. And I can't find a good article or anything explaining the best way to size a page so that it works well in most common resolutions. I am working on a site for my dad so that I can force myself to learn this but when i change the window size it will overlap text or other problems in the body can anyone help me....

The site is dcstripes.com

Caleb Smith

Dec 2nd, 2009, 09:33 PM
Hello calebandchels,
Your #all is set at 1200px wide so anyone with a smaller than 1200pixel viewport will get a horizontal scrollbar.

Your content in #all is much longer than the height:525px; you have set on it. See how the box model works. (http://www.w3.org/TR/CSS2/box.html)

Your absolute positioned elements take their position from the body of the document right now. That doesn't work because #all move differently than body. To make it so the images move with #all, add position:relative;
Make the CSS for #all look like this -

position: relative;
Once you do this, you will have to reposition your ap elements.

Dec 2nd, 2009, 09:50 PM
so should i set width to 800 since its a common resolution???

Dec 2nd, 2009, 10:15 PM
I think that having a width of 800 is starting to fade out these days as I believe most people have larger moniters.

Here is a link for display stats: http://www.w3schools.com/browsers/browsers_display.asp

You could make a fluid layout with a min and max width if you want a site that expands and contracts.