How can I compensate for different Monitor Resolutions? [Archive]

Click to See Complete Forum and Search --> : How can I compensate for different Monitor Resolutions?

Nictu

04-15-2009, 03:55 PM

Hi folks,

I'm building my first web site using HTML and CSS along with guidance from a book, "Build your Web SIte the Right Way Using HTML and CSS" by Ian Lloyd.

I had to invest in a new laptop and the screen is running at a higher default resolution and with more colors.

Where my old PC displayed my web pages the way I wanted them, my new laptop shows them out of aligment e.g. text in the wrong place.

I could just manually re-arrange the pages to fit, but this could cause problems for other users with different monitors and resolutions.

So my question is, can I get my website to automatically adjust the web pages to suite the screen being used?

Help and advice is much appreciated,
Nictu.

lystar

04-15-2009, 04:22 PM

There are many methods for issues such as this, and its one that many new web developers have to face.

The very first step is to remember that just because your webpage looks right to you, on your machine, it may not translate the same to every user. So test your site as much as you can. Get yourself copies of different browsers (Firefox, IE, Safari, Opera... to name a few). Each one has its own little quirks that can mess with your layouts. When I'm working on a site, I also change the resolution of my monitor and view my site to make sure its working properly under as many resolutions as possible.

Now to actually answer your question. I find the easiest thing to do is use container elements. Typically I use <div> tags. I wrap all of my headers, or content in an element with a fixed width (I usually use 800 pixels or so). This will provide a sort of canvas to work within. If you base all of the content within that canvas on its parent <div> you'll find that regardless of how a user resizes their browser or changes resolutions the layout will remain in tact.

For example:

<body>
<div id="myHeaderContainer" style="width: 800px; margin: 0 auto 0 auto;">
<div id="myHeader" style="width: 99%;">This is my Header</div>
</div>

<div id="myContentContainer" style="width: 800px; margin: 0 auto 0 auto">
<div id="contentWindow" style="width: 99%;">This is where my content goes</div>
</div>
</body>

If you exclude the "Container" divs from the above example, and I open it in a 1200px wide resolution, the header and content divs will be 99% of 1200 pixels wide. If I open it at 1024px resolution, they'll be 99% of that 1024 etc. But with the 800px wide container divisions, the inner content will always be 99% of 800px regardless of the resolution of my monitor.

That's just one example. But using bigger containers to nest your content in is a common and valuable practice for cross resolution/cross browser compatibility.

Hope that helps.

Nictu

04-15-2009, 05:06 PM

Many Thanks Lystar !

I have been using <div> but hadn't made the link to using it as a canvas as you have explained so well !

Thanks Again,
Nictu

lystar

04-15-2009, 05:31 PM

Not a problem at all. I know the feeling of having perfected a gorgeous layout just to have it obliterated by viewing it under different settings. When I first started developing using CSS, it was a confusing ordeal. Learning all the different ways my layouts could be broken took some time especially all the browser quirks (and more importantly understanding them). But it gets easier, and once you've got it down pat, you wonder what you ever did without it!

The best way to make a fool proof layout is to try your best to destroy it through testing under different settings.