4.1 Frame Layout | Webmaster in a Nutshell, Third Edition

tags, cols attribute,

tags, rows attribute, tags, rows, in frames , columns , in frames, * (asterisk), frame size, asterisk (*), frame size , noresize attribute, ">


Team-Fly

	Webmaster in a Nutshell, 3rd Edition By Robert Eckstein, Stephen Spainhour
	Table of Contents

	Chapter 4. Frames

4.1 Frame Layout

The <frameset> tag defines the collection of frames or other framesets in a document. Framesets may be nested, providing a richer set of layout capabilities. The <frameset> tag replaces the <body> tag in a document. You may not include any other content except valid <head> and <frameset> content.

The <frameset> tag uses two attributes to let you define the size and number of columns (cols) and rows (rows) of either frames or nested framesets to display in the document window. These attributes divide a frameset in a grid-like or tabular format. Both attributes accept a quote- enclosed , comma-separated list of values that specify either the absolute or relative width (for columns) or height (for rows) for the frames. The number of attribute values determines how many rows or columns of frames the browser displays in the document window.

Each value in the rows and cols attributes can be specified in one of three ways: as an absolute number of pixels, as a percentage of the total width or height of the frameset, or as a portion of the space remaining after setting aside room for adjacent elements.

The browser matches the size specifications as closely as possible. However, the browser will not extend the boundaries of the main document window or leave blank space outside of frames. Space is allocated to a particular frame in reference to all other frames across the row or down the column, and the entire document window is filled. Also, the main document window for a frame document does not have scrollbars.

Here is an example of setting row heights in pixels:

 <frameset rows="150,300,150" >

This creates three frames, each stretching across the entire document window. The top and bottom rows are set to 150 pixels tall; the middle is set to 300 pixels. Unless the browser window is exactly 600 pixels tall, the browser automatically and proportionally stretches or compresses the top and bottom rows so that each occupies one-quarter of the window space. The middle row occupies the remaining half of the window. This frameset could be expressed with percentages like this:

 <frameset rows="25%,50%,25%" >

The percentages should add up to 100%, of course. If they don't, the browser resizes the rows proportionally to make them fit.

To make row and column sizing easier, you can use the asterisk (*) character. The asterisk represents one equal portion of the remaining window space, whatever it is. For example:

 <frameset cols="50,*" >

creates one fixed 50-pixel column down the left side of the window; the remaining space goes to the right column. The asterisk can also be used for more than one column or row. For example:

 <frameset rows="*,100,*" >

creates a 100-pixel-tall row across the middle of a frameset and rows above and below it that are equal in height.

If you precede the asterisk with an integer value, the corresponding row or column gets proportionally more of the available space. For example:

 <frameset cols="10%,3*,*,*" >

creates four columns: the first column occupies 10% of the overall width of the frameset. The second column then gets three-fifths of the remaining space, and the third and fourth columns each get one-fifth. Using the asterisk makes it easy to divide remaining space in a frameset.

Be aware that unless you explicitly tell it not to, the browser lets users manually resize the individual columns and rows in a frame document. To prevent this, use the noresize attribute for the <frame> tag.


Team-Fly

Top