Floating Frames

With Internet Explorer 3.0, Microsoft introduced a novel variation on frames: floating frames. This concept, which is a part of HTML 4.01, is somewhat different from the original frames idea that was introduced in Netscape.

Floating frames have their advantages and disadvantages. One advantage is that you can position a floating frame anywhere on a web page, just as you can with an image, a table, or any other web page element.

Browser Support for Floating Frames

The authors of the HTML 4.01 frames specification included floating frames with some hesitation. According to the specification, you can use the <object> tag to achieve the same effect as floating frames, so the inclusion of this type of frame is questionable. Still, the tag is included in the HTML 4.01 specification, and all versions of Internet Explorer since version 3, Mozilla Firefox, Netscape 6 (and above), and Opera 5 (and above) all support it. Learning to use floating frames is worthwhile.

Standard framesets enable you to specify alternative content that can be viewed when someone without a frames-compatible browser navigates to a frameset. Unfortunately, you don't have this option with the <iframe> element. If you include a floating frame on your web page and a user navigates to it with a browser that doesn't support them, he'll see absolutely nothing at all in the area where the frame should be.

With that warning out of the way, here's a brief run-through of how to create floating frames. First, you define them by using the <iframe> tag. Like images, these frames appear inline in the middle of the body of an HTML document (hence the i in <iframe>). The <iframe> tag enables you to insert an HTML document in a frame anywhere in another HTML document.

Table 14.3 shows how <iframe> takes the key attributesall of which, except for those indicated as Internet Explorer extensions, appear in HTML 4.01.

Table 14.3. Key Attributes

Attribute	Description
width	Specifies the width, in pixels, of the floating frame that will hold the HTML document.
height	Specifies the height, in pixels, of the floating frame that will hold the HTML document.
src	Specifies the URL of the HTML document to be displayed in the frame.
name	Specifies the name of the frame for the purpose of linking and targeting.
frameborder	Indicates whether the frame should display a border. A value of 1 indicates the presence of a border, and a value of 0 indicates no border should be displayed.
marginwidth	Specifies the margin size for the left and right sides of the frame in pixels.
marginheight	Specifies the size of the top and bottom margins in pixels.
noresize	Indicates that the frame should not be resizable by the user (Internet Explorer extension).
scrolling	As with the <frame> tag, indicates whether the inline frame should include scrollbars. (This attribute can take the values yes, no, or auto; the default is auto.)
vspace	Specifies the height of the margin (Internet Explorer extension).
hspace	Specifies the width of the margin (Internet Explorer extension).
align	As with the <img> tag, specifies the positioning of the frame with respect to the text line in which it occurs. Possible values include left, middle, right, top, and bottom, which is the default value. absbottom, absmiddle, baseline, and texttop are available as Internet Explorer extensions.

Because you know how to use both regular frames and inline images, using the <iframe> tag is fairly easy. The following code displays one way to use the Away from My Desk pages in conjunction with a floating frame. In this example, you begin by creating a page with a red background. The links that the user clicks appear on a single line, centered above the floating frame. For clarity, I've placed each of the links on a separate line of code.

Following the links (which target the floating frame named "reason"), the code for the floating frame appears within a centered <div> element. As the following code shows, the floating frame will be centered on the page and will measure 450 pixels wide by 315 pixels high:

Input

<html> <head> <title>I'm Away From My Desk</title> </head> <body bgcolor="#ffcc99"> <h2>I'm away from my desk because ...</h2> <p align="center">   <a href="reason1.html" target="reason">Reason 1</a> |   <a href="reason2.html" target="reason">Reason 2</a> |   <a href="reason3.html" target="reason">Reason 3</a> |   <a href="reason4.html" target="reason">Reason 4</a> |   <a href="reason5.html" target="reason">Reason 5</a> |   <a href="reason6.html" target="reason">Reason 6</a> </p> <div align="center"> <iframe name="reason"   src="/books/2/631/1/html/2/reason1.html"   width="450"   height="315"> </div> </body> </html>

Figure 14.17 shows the result.

Output

Figure 14.17. An inline (or floating) frame.