|
|
|
|
| ||
      |
| ||||
|
|
|
|
|
|
|
CATEGORIES Home Getting Started HTML Cheat Sheet Webmaster Tools HTML Help Forum Color Codes Link to us |
|
|
 | ||||
|
|
|
|
Why does my web page look wrong in certain sizes?Many moons ago web designers did not have to face this problem, they could mostly rely on everyone looking at there web site at a 640 by 480 pixel resolution. Now a day's your able to change your resolution, which can make the computer screen seem bigger, or smaller. This is great for people who have bad eyes, they can increase or decrease the screen size to best fit there eyes, but on the other hand it's not so great for web designers because we have to make the web page to look good in all these different resolution's. If your web page is to wide, your user's may have to scroll left and right to see all of your content. Most people will not take the time to do this, and just look at the information they immediately see when the page loads, so information to the far right of the page may be ignored. Or your viewer could have a high resolution screen, then your web page may look to narrow, or the content may be to spread out. To solve this pesky problem, your going to need to include the content on your page in a large table, providing an overall grid for locating objects on the page. This will allow you to specify the width and height for the page. Not only that but it also helps to align images, and lets you set different backgrounds for different areas of the page. There’s 2 basic strategies: either specify a fixed width for each section, or allow the browser to resize your content as needed to fit the page width.
1. Create a large layout table with a <TABLE> tag, setting the border attribute to 0. Automatically by default the page will be aligned at the left side of the window, if you want to split the extra space on the left and right sides of the page, set the align attribute to center. If you want columns of the table to touch one another, for example, if adjacent columns will contain images that should join edges, set the cell padding and cell spacing attributes to 0 as well. 2. For each column (<TD> tag), set the width attribute to the pixel width of the content you expect the content to hold. If any cells need to span more than one column, for example a banner that goes across the whole page, set the cols pan attribute to the number of columns. Here's a sample three-column layout table that provides cells for a page banner and footer, uses a different background color for each section, and appears in the center of the browser window. It fits in any window that's at least 600 pixels wide.:
<table align=center border=0 cellpadding=10 cellspacing=0> <tr> <td colspan=3 align=center bgcolor="#99ccff"> <img src="banner.gif" alt="BANNER GOES HERE" width=590 height=60> </td> </tr> <tr valign=top> <td width=100 align=right bgcolor="#ffcc66"> <a href="pageone.html">HyperLink 1</a><br> <a href="pagetwo.html">HyperLink 2</a><br> </td> <td width=350> <h1>Heading</h1> <p>This is the main section of the page.</p> </td> <td width=100 align=center bgcolor="#ff9933"> <img src="ad1.gif" alt="ad #1" width=96 height=96 vspace=6><br> <img src="ad2.gif" alt="ad #2" width=96 height=96 vspace=6><br> </td> </tr> <tr> <td colspan=3 align=center bgcolor="#cccccc"> Copright © 2000 nobody </td> </tr> </table>
If you want your layout to stretch when your viewers change the width of the window, remove the width attribute from the column you want to stretch (in the preceding code, you'd delete width=350", and then set the width attribute for the TABLE tag to a relative value, such as 90% or 100%. 3. Once you get the layout table in place, move your existing content into each section of the page. Preview the page with a variety of window sizes to approximate what viewers might see, and adjust the width attribute in each TD tag to provide the best fit. |
