This chapter is from the book
This chapter is from the book
This chapter is from the book
Managing Layout
For this example, you'll use a mixed fixed width and dynamic table layout in XHTML 1.0 transitional that effectively manages navigation, content, and graphics along with a total of seven ads on the page.
The virtues of the fixed and dynamic layout combinations are numerous, including cross-resolution compatibility, visual control over specific areas of the document, and dynamic flow of specific areas.
Table Cells and Single-Pixel GIFs
Fixed-table cells require either a graphic of the cell's exact width (such as a header), or a single-pixel GIF shim set to the width of the table to ensure the cell does not collapse.
Graphic shims have been a long-debated issue. The idea of a graphic shim goes right to the heart of the argument that says document formatting and presentation should be separated. If browsers conform to current CSS2 standards, and if all people had browsers that conformed, we could toss the idea of a shim out the window and rely on style-sheet positioning to control presentation instead.
Until then, the shim is the only invisible method to ensure that a fixed cell does not collapse.
Download the code samples related to this chapter from this book's web site and follow along. You will want to have the master_document.html and the table_template .html documents available.
To achieve a combination of fixed and dynamic layout tables, follow these steps:
Open table_template.html in your editor.
It should read
<table> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
In the table tag itself, insert the following border, width, and padding attributes:
<table border="0" width="100%" cellpadding="0" cellspacing="0">
The width is dynamic, set to 100 percent. This ensures that the entire document dynamically adjusts to the available screen space. Setting the defaults of padding and spacing to 0 eliminates any problems with spliced graphics within the table by ensuring that no unwanted gaps appear.
In the first table cell, add the following attributes:
<td width="200"> </td> </table>
You'll notice that this cell has a numeric value, like its width attribute. This fixes the size.
In the second table cell, add the following attributes:
<td width="100%"> </td>
In this case, the cell is dynamic—its content stretches to the available resolution. Notice that the value is 100 percent. This means that the content portions of the site will be dynamic to the most-available space.
In the third table cell, add the following attributes:
<td width="200"> </td>
This cell is fixed. Again, a graphic or shim set to the same width of the cell will be helpful to ensure against collapsing cells.
Insert this table into an HTML or XHMTL document template of your own and add content to see how it works.
Figure 3.2 The WebReview.com home page with table borders on. This way, you can see each individual cell, the entire table structure, and how the various text and image elements fit into each cell.
You can also modify which cells are fixed and which are dynamic—it just depends on on your needs. If you examine master_document.html, you see that the main table has additional cells. Play around with the number and type of cells and see what might work the best magic for you. In the figure, I turned on the table borders so you can see the table structure of WebReview.com's home page.
TIP
Here's a trick that many web designers use to assist them during the development of page layouts: Set table borders to a value of 1. This way, the grid is clearly visible and adjustments can be easily made. Switch the borders back to a value of 0 to see the end result.
){kind=link}