Designing The Site To Be Full Screen

Another way to make sure your site will always fit any size screen is to build the site so that it fills the entire browser window, or a percentage of the browser window, regardless of the user's screen resolution. This can be done in one of two ways:

1. Design the site without any tables or special formatting.

By default, HTML displays all content in the full browser window. It puts a small margin around the page, in order to keep the text or graphics from running directly into the side of the window. In most cases, you won't need to adjust the margins.

When designing without table formatting, just make sure you don't use any graphics with a width of over 615 pixels, or else they may not display properly in the user's browser window.

2. Design the site inside a table with a flexible width.

In addition to designing a site inside a table with a fixed width, you can also specify a percentage of the browser window width to use for displaying the page content. Here is the sample code of a page with a 2-column table. The table is set to extend the full width (100%) of the browser window, regardless of its size. Each column inside the table will take up 50% of the width of the table.

Click here to view a page using the above html code.

Setting Table Height

Also, you can specify the table to fill the entire height of the page. If your page lacks enough content to fill up an entire screen, you may want to use this just to keep the site uniform. You simple add a height=100% tag inside the Table tag. This technique is often used to make vertical menu bars run the entire length of the screen, from top to bottom. It also allows you to place graphics or footers at the very bottom of every page.

Click here to view a page with 100% height and width.

Adjusting Page Margins

In the above example, you will see that the table does not take up the full page, even though it is set to 100% height and 100% width. This is because your web browser uses a default amount of space (about 10 pixels) to function as a border around your page. This is done to so that your content does not run right into the edge of the window, making it harder to read.

Click here to view a page with 100% height and width, and no left or top margins. This is the same page as the link above, except it contains the following line of HTML code, which sets the left and top page margins to zero.

Setting the margins to zero is best used only in cases where the entire page is formatted using tables. Otherwise, it will cause your content to ride the edges of the browser window.

Copyright 2001 Fungi Software (Wicked Clean Productions)
Email: fungisoft@hotmail.com