Standardising Page Size for different resolutions

Help required for beginner

[Herman_TG]

I am fairly new to HTML and have developed a simple site without much software help (an old version of FP2000) on a 1024 width resolution.
When I view this site on machines with greater resolution e.g. 1280 my pictures are tiled to fill the gap and text windows stretched.
I would like assistance to determine how to contain my page to a 1024 width even though the browser may have a greater width.
I would like to do this either via the style sheet or HTML code if possible.
Many thanks in advance for your valuable help
PS - this is my first post - so treat me gently!

[simonuk]

Hi Herman, welcome to WebmasterWorld!

I'm afraid that you don't have enough information to let you know what to do (Is the site built using tables or css for example?).

If you are using tables then set the outter most table a width:

<table width="1024px">

If you're using CSS then set the width in the outter container.

If the images are background images then there should be an option to set them to no-repeat.

[phranque]

i'm not sure if this is exactly what you are looking for, but the Web Developer add-on for firefox has a resizer that you can set for spefic screen resolutions.
for example a while back i was testing something for small screens so i had some settings for low res - 800x600 and "smartphone" - 329x329.

[Herman_TG]

Thankyou all for your responses. The site is built with a mixture of tables and CSS (as I was learning how to use CSS). The CSS mostly controls the colours, fonts etc and all table controls are in the code. I designed my site on 1024 width and did not test how this would display on 800. Would it be best to resdesign the whole site on an 800 width and leave "white" space on either side or persevere with the 1024 width. I was really wishing to know whether it was possible to build in intelligence that would detect the resolution of the browser used and re-size appropriately - but this is probably beyond my skills at present. Thanks again.

[piatkow]

When you get to larger resolutions are less likely to have their browser set to fill the screen anyway. If you have a good design for an 800px width then I would say go for it.

[phranque]

welcome to WebmasterWorld [webmasterworld.com], Herman_TG!

for a start, you can set body width like this:
<style type="text/css">
body
{
width: 1024px
}
</style>

i would suggest using something more like 1008px or less so that if the content is long enough to require a vertical scrollbar it doesn't also introduce a horizontal scrollbar.
(statement assuming 1024px wide laptop display for example)

it's also possible to use javascript to determine screen width from the DOM and dynamically reset the width of elements based on that.

[korkus2000]

A little off topic but, like phranque mentioned on a 1024 resolution you have the browser chrome and the possibility of a scroll bar. This means you have less than 1024 to really play with. The web safe area for 1024 res is usually 955px to hit all browser differences with chrome and scroll bar width.

[phranque]

69px seems like a lot for chrome and scrollbar, but i probably haven't tested as many browsers as k2k.
as long as you get the idea...

[Herman_TG]

Thanks all for your very valued responses - now time to have a go........

[swa66]

I'm not sure about the rest of you, but I hardly ever have a browser full screen.
(1920px wide is just way too much)
Actually I mostly have the window about half of the width of the screen, about 800px wide or so, it leaves the rest of the screen to do useful stuff.
Long lines are very hard to read ...

I was really wishing to know whether it was possible to build in intelligence that would detect the resolution of the browser used and re-size appropriately - but this is probably beyond my skills at present.

Actually there is nifty stuff being implemented in browsers, if you use CSS:
[webmasterworld.com...]