Common manifestation of the problem: Page shifted to the left on higher
resolution monitors, leaving a large white space to the right side.
If you are perplexed by how to make your
website look okay when you have people viewing it with different
resolutions, here's a neat solution.
Design your site with fixed tables (or
css) and make sure the table width is about 760, which will ensure that
the webpage will fit well on the most commonly used 800x600 resolution.
The same page when seen with a monitor
with 1024x768 resolution will be pushed to the left, and will leave
third of the screen white, or your background color, on the right site.
This will get worse for higher
resolution monitors: 1152 x 870 will leave almost half of your screen
white or in background color.
Once you have created your webpage, the
structure will be something like:
<body>
Webpage body HTML
</body>
Solution:
The trick is to
center your webpage for the higher resolutions, so the page is not
pushed to the left, but appears in the center for all screens.
The way to accomplish is to insert a bounding table around the webpage
body html. Now align this table to center, which will make sure that
the page will be centered, and the white spaces will be distributed
evenly on both sides.
<body>
<table
width="100%"><tr><td align="center">
Webpage body HTML
</td></tr>
</table>
</body>
Insert the tags in the red on any
webpage and you have a centered page for all monitor resolutions!
The beauty of this solution that it
works well for existing pages, and doesn't need anything much except
inserting this bounding table. You can also adjust the background color
of this table to suit your website design.
|