HTML and CSS [Electronic resources]

Molly E. Holzschlag

نسخه متنی -صفحه : 198/ 79

Adding Columns

Framesets support columns and rows. In this section, you'll add columns to your frameset. You begin by setting up the two-column frame page.

The cols attribute for the frameset element gives you three value options:

Numeric value in pixels, such as cols="200". This results in a 200-pixel column.
Percentage value, such as cols="75%". A percentage value results in the column being 75% of the available browser space.
Dynamic value, represented by an asterisk, as in cols="*". This means that the column will dynamically resize to the available browser space.

Example 6-4. Creating a two-column frame page

<!DOCTYP176 PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/l1/DTD/l1-frameset.dtd">
&l191 xmlns="http://www.w3.org/1999/l">
<head>
<title>Frameset Document</title>
</head>
<frameset cols="200, *">
<frame src="lightgra196" />
<frame src="darkgra196" />
</frameset>
<l>

This results in the left, light-gray column being fixed at 200 pixels and the right, dark-gray column being dynamic (see Figure 6-2).

Figure 6-2. The left column is fixed at 200 pixels, whereas the right column will dynamically resize along with the browser.

[View full size image]

Of course, you can have multiple columnsas many as you want. Just add more comma-separated values (and more frame elements to correspond). What's more, nothing says you can't mix and match the column values. Consider Example 6-5, which provides four total columns (see Figure 6-3).

Example 6-5. Frame page with four columns

<frameset cols="25%, *, 100, 25%">
<frame src="lightgra196" />
<frame src="darkgra196" />
<frame src="lightgra196" />
<frame src="darkgra196" />
</frameset>

Figure 6-3. A four-column frame page; the far left and right columns will take up 25% of the browser space, the left center column is dynamic, and the right center is fixed at 100 pixels.