Screen Resolution vs Design Width

css:

#outer {
maximum-width: 1200px;
float:right;
margin-right: 6.67%; /* 80px */

}

I’m beginning to believe that 1200px is to great for 1024x768 resolution which is now the most widely used monitor resolution. (See attached .png graphic.)

I believe that higher resolution users are my target audience.

I viewed my sight (Properties With Style Home Page - Orange County Real Estate) on a notebook at 1024x768 and it was horrible.

I don’t expect to please everyone as that’s impossible, however, I do wish to design my pages using percentages for widths and pixels for heights. Comments?

Also, I noticed that my main content (80% or 960px) when scrolled over to the left will slide over on top of my list menu.

This is not good! How do I remedy that?

Your input would be greatly appreciated.

Thanks. Rick

You are not budgeting your screen real estate realistically

1024px may be the most widely available screen, but you need to take into what size users maximize their browser windows to, generally. So dont even count on 1024px, even if that the most popular resolution.

Also while you may give PREFERENCE to your target audience ( makes sense) dont make your design inaccessible at other resolutions. Remember your target audience could be viewing your site from a friend’s house :wink:

The big problem, I guess is to get set on an idea or layout that isn’t flexible. When designing makes this goal in mind: looks good at the perfect resolution but is OK in EVERY OTHER. If you have to sacrifice the “it looks OK” part to make it look good at a specific resolution then the CONCEPT behind the design is wrong and would be best replaced by something else.

Specifically with your site:
it looks like you have given the allotted width to your content and never took into consideration your navigation; maybe you figured you could hang it of the side… for those big monitor. The thing is, this concept COUNTS ON large monitors and margins of to each side of your content. BAD. Include EVERYTHING, navigation too, in your width when concepting you layout.

my $0.04 ( inflation adjusted), hope it helps

Hi,

You are still doing some weird positioning and I believe we have been through this before.:slight_smile:

It would be better to use a min and max-width layout and put the big image in the background so it can reduce/expand in size without breaking the layout.

Here’s a quick example of how I would approach this although I think the fixed nav steals too much real estate as you can never have anything under it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
body {
    background:url(http://www.propertieswithstyle.com/css/images/blinds1.png) repeat 0 0;
    padding:0 10px;
}
#outer {
    min-width:600px;
    max-width:1180px;
    margin:auto;
    width:100%;
    padding:10px 0;
    position:relative;
}
#main {
    margin-left:210px;
    zoom:1.0
}
#header {
    position:relative;
    height:364px;
    background:url(http://www.propertieswithstyle.com/css/images/equestrainestate.jpg) no-repeat 50% 100%;
    margin:0 0 2em;
}
h1, h1 span, h1 b {
    height:60px;
    overflow:hidden;
    display:block;
    margin:0;
    position:relative;
}
* html h1{width:960px;margin:auto}
h1 span, h1 b {
    position:absolute;
    left:0;
    top:0;
    padding:0 0 0 253px;
    background:url(http://www.propertieswithstyle.com/css/images/pwsheader.gif) no-repeat 0 0;
    z-index:2;
}
h1 b {
    right:0;
    left:auto;
    z-index:1;
    width:100%;
    background-position:100% 0;
    padding:0;
}
#nav {
    margin:0;
    padding:0;
    list-style:none;
    position:fixed;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#000;/*#6CF;*/
    position:fixed;
    top:100px;
    width:200px;
}
* html #nav{position:absolute;}
#nav li{font-size:90%;margin:0 0 5px}
#nav a,#nav a:link,#nav a:visited {
    color: #6CF;
    text-decoration:none;
}
#nav li a:hover{color:#fff}
p {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    line-height: 120%;
    color: rgb(102, 204, 255);
    margin:0 0 1em
}
#main p{margin:0 10px 1em}
</style>
</head>
<body id="home">
<div id="outer">
    <div id="main">
        <div id="header">
            <h1>Properties with Style - <small>946 637 7560 Rick Shreiber President</small><span></span><b></b></h1>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    </div>
    <ul id="nav">
        <li><a href="http://www.propertieswithstyle.com" title="HOME PAGE">PWS Home Page</a></li>
        <li><a href="#">Micro City Views</a></li>
        <li><a href="#">Visual Value Approach</a></li>
        <li><a href="#">Micro City Views</a></li>
        <li><a href="#">Crucial Market data</a></li>
        <li><a href="#">For Sellers</a></li>
        <li><a href="#">For Buyers</a></li>
        <li><a href="#">City Schools Search</a></li>
    </ul>
</div>
</body>
</html>


(You’d need to add a js fix for min and max width of you want to support IE6.)