Making your web pages fit in any screen resolutions

page layout

[cybertime]

I would like to make changes to my site that will adjust the size/page layout to fit in any screen resolutions.

Please explain if you how to make the changes.

Thanks

[encyclo]

Welcome to WebmasterWorld, cybertime!

The method depends on how your page is built. What you need to do is basically replace fixed width sizes defined in the tables or the CSS, and replace them with percentages. For example, if you have a table-based design with a fixed-width container you may have something like:

<table width="768">

You could replace it with:

<table width="95%">

You may want to keep one or two columns fixed-width, but the main content column fluid.

[cybertime]

Thanks for the message, Encyclo.

I used HTML-kit to designed the site.

I will take you advise and change the table width to %s.

Thanks again,
Cybertime

[BuckerBucker]

Hey Cybertime,
Just now finished making my site fit all screen resolutions.....it turned out to be a little more difficult than I expected....Watch out for things like text boxes (moveable boxes included with popular web page making software like "Frontpage"). If your webpage isn't anchored down completely in a table, then whatever is loose will free float depending on screen resolutions. What looks good in one setting won't necessarily be readable in the next. Solved it by getting rid of all unanchored text and art, and placing the comment align="center" in my table tag. Hope this helps.

[cybertime]

Thanks BuckerBucker.

I will keep this in mind.

I am new at this, will you be ablet to explain what you meant by "webpage isn't anchored down completely in a table, then whatever is loose will free float depending on screen resolutions".

Thanks.

[globay]

You might want to have a look over at the CSS Forum [webmasterworld.com] or you can search for "liquid design", meaning design that will adjust to different screen resolutions.

[BuckerBucker]

Cybertime,

When I used "Frontpage" to make my pages, they offered things like "text boxes" that could be filled with text or images. These boxes, once placed on the page, could be freely moved to the locations you wanted on your page. Unfortunately, when the screen size or resolutions were changed, the boxes freefloated to whereever they wanted, ususally covering up the most important things on the page. I finally got rid of all the fancy stuff, and settled with good old fashioned tables with good old fashioned code. Additionally, I took the advice of Encyclo, threw the Front Page coding out the window, and did all my work in notepad first, which left out all the free floating code of Frontpage. If I've gone on too long.....sorry....I've struggled for two weeks with this problem, and I have finally WON!

[cybertime]

Thanks Globay and BuckerBucker for your post.

I have visited the css posting and found it very useful

Cybertime.