Screen Resolution

[FreeThinker]

When i view my webpage on 800 x 600 pixels screen resolution, it seems to be fine and cover the whole page, but then when i view it on 1024 x 768 pixels, the webpage appears in the center of the screen and there are gaps on each side. Is there a code that i can put in my script that enables the screen to expand and cover the whole page to suit both screen resoultions?

- Free Thinker

[jscheuer1]

That would be nice. Oddly enough we more often get the opposite question; "How can I make my 800x600 content centered at higher resolutions so that the layout doesn't get messed up?"

Designing a page that looks good at all resolutions is a knack I haven't yet completely mastered myself. Much depends upon the content. One key concept is to not worry about the page looking the same at all resolutions.

If you want to fill the screen at various resolutions, use relative dimensions (em's, %'s) rather than absolute (pt, px) wherever possible (not for images). This will usually result in a shorter, fatter page at higher resolutions which, looks fine for many pages.

[cr3ative]

My website adapts to the window (www.cr3ation.co.uk), by using a 100% width table. Perhaps this could cure your problem?

cr3ative

[FreeThinker]

I have many tables on my webpage, and i don't know which ones to switch to '100%' and which ones to leave as normal. Also do i change the tables to the figure '100%' or leave them at their same number and add a '%' sign next to them?

- Free Thinker

[jscheuer1]

It is kind of a guessing game as to what to set your tables to. A good rule of thumb is to view your page full screen in the resolution you like the best. Determine the inner width of the window or use the screen width. Take the current width of each table and divide by this width. Say you are viewing at 800x600 and the current width is 545. That gives 545/800 = 0.68125 or roughly, 68%. Your figures will be more accurate if you use the inner width. to find that, temporarily put this script on your page as the very last thing before the closing </body> tag:

<script type="text/javascript">
var ns6 = (document.getElementById && !document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}
function winWid(){ return (ns6) ? window.innerWidth:iecompattest().clientWidth; }
var width=winWid();
alert(width)
</script>

When you load or refresh your page, this will make an alert box with the inner width. Use that number minus any left and right margins you have set for the body or -20 (the approximate default horizontal body margin) if you have set no margins for the body. Even with this most accurate width you may still need to guess a little. For example, if after dividing your table's width by the inner or the screen width you get say 35% as your width, you may find that 36% looks better or maybe 34.5% or whatever looks good to you.