...

View Full Version : Screen Resolution advice



calebandchels
12-02-2009, 10: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

Excavator
12-02-2009, 10: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 -

#all{
width:1200px;
/*height:525px;*/
margin-left:auto;
margin-right:auto;
position: relative;
}
Once you do this, you will have to reposition your ap elements.

calebandchels
12-02-2009, 10:50 PM
so should i set width to 800 since its a common resolution???

Syrehn
12-02-2009, 11: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum