www.RickBull.com > tutorials > HTML > Frames
Jump to: Contents | Part 1 | Part 2

Frame Alternatives

Sections:

Introduction

This is the second part of the frames tutorial (please read the first part if you have not already) and will guide you through some of the alternatives to frames, such as <iframe>, layer and <object>. Each have advantages and disadvantages which you will soon see. Anyway enough ramblings, onto the tutorials good sir!

IFRAMEs

IFRAMEs, or Inline-Frames, are basically frames within your page text, i.e. they allow you to embed another HTML document within the current page. Although these are not available in XHTML Strict, but are in XHTML Transitional and HTML 4. IFRAMES are supported in Internet Explorer 4+, Netscape 6 and Opera. If you would like to keep support for Netscape 4 then please read the LAYER as a Backup to IFRAME section. Here is an example of how to use IFRAMEs:

    <iframe src="News.htm" name="NewsFrame" width="250" height="250">
      <div style="text-align: center;">
        [Your Browser Does Not Handle IFRAMES, Sorry!] 
        The document that is supposed to be displayed here is
        <a href="News.htm">News.htm</a>.
      </div>
    </iframe>

So in between the iframe tags you should include text for browsers that do not support them, and perhaps a link to the document that is supposed to appear in its place. The other attribute should be self explanatory, so all that is left is for me to tell you other attributes the iframe can take.

IFRAME Attributes

longdesc
This is a link to a file that contains a long description of what the contents of this frame is. This may help with some non-visual browsers. This should be used in conjunction with the title element, which is used to give a short description of the frame's contents
    <iframe longdesc="LeftFrameDesc.htm">
name
Name of the frame for targeting links from other frames.
    <iframe name="LeftFrame">
src
The file that is to be loaded into this frame
    <iframe src="Left.html">
frameborder
May be either a 0 (off) or a 1 (on). Default is 1.
    <iframe frameborder="0">
marginwidth
Specifies (in pixels) the amount of space rendered between the left and right of frame's border and its content.
    <iframe marginwidth="25">
marginheight
As above but for top and bottom rather than left and right
    <iframe marginheight="10">
scrolling
Sets whether scrollbars are present in the frame. Values may be yes, no or auto (depends on frame contents); auto is the default value
    <iframe scrolling="no">
align
Vertical or horizontal alignment of the IFRAME. Values include: top, middle, bottom, left and right.
    <iframe align="center">
height
As above but for height rather width.
    <iframe height="120">
width
Specifies the width of the IFRAME as either a pixel value (e.g. width="50") or a percentage value (e.g. width="80%").
    <iframe width="90%">

Again IFRAME tags also have common core-attributes that are common to most elements of HTML.

Layers

Layers allow you to position blocks of code but they will only work in Netscape 4 and not Netscape 6+ or other browsers. Using layers will also make you page not validate using the W3C's Validator. Layers are useful if you intend to use IFRAMEs, as they will not work in Netscape 4. There are two types of layers; LAYER and ILAYER

LAYER

LAYERs allows you to position your code in an absolute positions. By this I mean if you specify its top attribute to equal 25 pixels it will always be 25 down from the top whether there are other elements there or not. It will not follow the flow of the document and its elementsbut position itself independently.

ILAYER

ILAYERs are the same as LAYERs but the will follow the flow of the document, and appear where you placed them in the code. These fit into your page more naturally and should be used unless you want to position elements above others. An example of a layer is show below:

    <ilayer src="LayerContent.htm" width="75%" height="250"></ilayer>
    <nolayer>
      <div style="text-align: center;">
        [Your Browser Does Not Handle LAYERS, Sorry!]
        The document that is supposed to be displayed here is
        <a href="LayerContent.htm">LayerContent.htm</a>
      </div>
    </nolayer>

The nolayer section provides alternative content for browsers that do not support them and should precede the LAYER section.

LAYER Attributes:

Both LAYER and ILAYER have the same attributes which are documented here:

above
Specifies the ID of the layer that is to be positioned directly above this one. The layer specified must already exist. This attribute cannot be used in conjunction with the z-index or below attributes.
      <layer above="Layer1">
background
Specifies an image to use as the background for the layer.
    <layer background="Images/LayerBack.jpg">
below
Specifies the ID of the layer that is to be positioned directly below this one. The layer specified must already exist. This attribute cannot be used in conjunction with the z-index or above attributes.
    <layer below="Layer2">
bgcolor
Specified the background colour to use for this layer.
    <layer bgcolor="#ff00ff">
clip
Specified the area that the layer should occupy. Four values are given separated by commas (,) representing left, top, width & height respectively. The values may be less than or equal to the size of the layer's parent.
    <layer clip="0,0,50,50">
height
Sets the height of the layer. The value may be given as a pixel value or as a percentage. Any child layers in this layer will take the same height if their height attribute is omitted.
    <layer height="75%">
left
Specifies the left position of the layer in pixels.
    <layer left="10">
pagex
Specifies the layer's Left position relative to the window, i.e. if you specify 25 the layer will always be 25px down from the left even if the user has scrolled to right of the page.
    <layer pagex="25">
pagey
Specifies the layer's top position relative to the window, i.e. if you specify 10 the layer will always be 10px down from the top even if the user has scrolled to bottom of the page.
    <layer pagey="10">
src
Specified the HTML page to be used in this layer. What ever is in the HTML file will be inserted into this layer.
    <layer src="LayerContent.htm">
onblur
This is a script event that occurs when the current layer looses focus (the active element) after having it:
    <layer onblur="alert('Ahhh, my eyes... My beautiful eyes!!');">
onfocus
This is a script event that occurs when the current frameset receives focus:
    <layer onfocus="alert('Oh wait it's OK now. Phew!');">
onload
Another script event that occurs when the current layers has been loaded.
    <layer onload="alert('There you go, I've loaded your page for you.');">
onmouseout
Occurs when the cursor leaves the current layer after being over it.
    <layer onmouseout="alert('Don't you like me any more?');">
onmouseover
Occurs when the cursor moves over the current layer.
    <layer onmouseover="alert('Oh, giving me some attention now are we?');">
top
Specifies the left position of the layer in pixels.
    <layer top="25">
visibility
Specifies whether the layers should be visible or not. It can take one of two values: show or hidden. The default is show, and child layers will inherit the parent's value.
    <layer visibility="hidden">
width
Sets the width and controls the right margin of the layer. The value may be given as a pixel value or as a percentage. Any child layers in this layer will take the same width if their width attribute is omitted.
    <layer width="150">
z-index
Sets the Z position of the layer, i.e. 0 = the furthest back layer and will be overlapped by layers with higher z-indexes. This value may only be positive values. This attribute cannot be used in conjunction with the above or below attributes.
    <layer z-index="5">

LAYER as a Backup to IFRAME

If you are using an IFRAME and you want to make sure that Netscape 4 browsers are not left without content you could do something like this:

    <iframe src="News.htm" name="NewsFrame" width="250" height="250">
      <div style="text-align: center;">
        <ilayer src="News.htm" width="250" height="250"></ilayer>
        <nolayer>
          <div style="text-align: center;">
            [Your Browser Does Not Handle IFRAMES or LAYERS, Sorry!]
            The document that is supposed to be displayed here is
            <a href="News.htm">News.htm</a>
          </div>
        </nolayer>
      </div>
    </iframe>

So first of all we try the official way with an IFRAME. If this fails we try a LAYER. And finally if that fails we simply give the user an error message and link to the page

Object

Object is a fairly new tag and is a great idea, as it is the only way to achieve an IFRAME affect when using XHTML Strict. Object lets you embed just about any object into your web pages, from another web page to a QuickTime movie. The main drawback is that some older browsers still have trouble with it. In my experience Internet Explorer 6 (and earlier) seems to have trouble embedding web pages at the moment, which is a shame as it is the most used browser. But I will cover it here as I am sure the next version should support it fully, and Mozilla, Netscape 6 and Opera seem to cope with it already. Object has a number of attributes but I am only going to cover here how to embed webpages. Here is an example of how to use the object tag:

    <object data="News.htm" type="text/html">
      [Your Browser Does Not Handle OBJECTs, Sorry!]
      The document that is supposed to be displayed here is
      <a href="LayerContent.htm">LayerContent.htm</a>
    </object>

So the first attribute we come across is data. This specifies what is embedded, in this case the file News.htm. Then we have type. This tells the browser what the type of file that is being embedded is. In this case it is text/html, i.e. web page. Then between the object tags goes text that browsers that do not support objects will see. Although some browsers are still buggy in this area, and will display both the embedded object and the text with in the tags.

Frames Effect with Cascading Style Sheets (CSS)

There are couple of methods that can be used to create a frames effect using CSS:

Positioning

The first method is to use positioning. Positioning gives you control of the placement of an element on your page. This example will create a left-hand frame, and some text next to it. So paste this into your text editor, save it as a HTML file and then view it:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>CSS Frame Effect</title>
    <meta name="language" content="en" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style media="screen" title="Default" type="text/css"><!--
      body {
        margin-left: 150px;
      }
      div.frame {
        /*Background and colour just to
        illustrate the start/end of the frame*/
        background: yellow;
        color: black;
        position: absolute;
        left: 5px;
        top: 5px;
        width: 130px;
      }
    --></style>
  </head>

  <body>
    <h1><a name="top">Page Title</a></h1>
    <p>Here is some text that I am just adding here to illustrate a
    <q>frames</q> effect by using CSS rather than actual frames</p>
    <p>So I really nothing to say, so erm "nothing"</p>
    <div class="frame">
      <h2>Left <q>frame</q></h2>
      <p>
        <a href="#Top">Link 1</a><br />
        <a href="#Top">Link 2</a><br />
        <a href="#Top">Link 3</a><br />
        <a href="#Top">Link 4</a><br />
      </p>
    </div>
  </body>
</html>

The first thing to explain is the actual CSS rules. The part that reads:

      body {
        margin-left: 150px;
      }

Tells the body to indent all text by 150px. This keeps the main text from flowing into the frame's text. Next is:

      div.frame {
        /*Background and colour just to
        illustrate the start/end of the frame*/
        background: yellow;
        color: black;
        position: absolute;
        left: 5px;
        top: 5px;
        width: 130px;
      }

We can ignore the background and colour attributes as they are just to show you where the frame starts/ends. The text position: absolute tells the browser that the div should be positioned at the exact co-ordinates specified afterwards, regardless of the rest of the stuff on the page. Then the we position the div 5 pixels across and 5 pixels down from the top of the page, with a width of 130px. This makes it just in from the body's 150 pixel margin, so we get a frame effect. Then all that is left to do is to apply this rule to the frame div by adding class="frame" to the div.

Now to see a version of this page with the frame to the right, replace the text between the style tags in the previous example with this:

      body {
        margin-right: 150px;
      }
      div.frame {
        /*Background and colour just to illustrate the start/end of the frame*/
        background: yellow;
        color: black;
        position: absolute;
        right: 5px;
        top: 5px;
        width: 130px;
      }

Basically all is the same in this example, and does not need explaining except to say that margin-left is replace with margin-right, which indents the text from the right rather than the left and that right is used in place of left. right simply positions the element's right-most area 5 pixels in from the right of the window.

One last thing to mention is that you can replace the keyword absolute with fixed and the element will stay at that position on the window, regarless of the scrollbar's position. But this does not work in Internet Explorer, although there are certain work arounds which I will not go in to here.

Overflow

Overflow allows you to dictate whether the content in block-level and replaced elements should be shown, or whether it should be clipped at a certain point or even totally invisible. Overflow allows you to use two values to add scroll bars to an element - scroll and auto.

<div style="width:90%; height:50px; overflow:scroll;">
  Content goes here.
</div>

Now you should see both vertical and horizontal scrollbars around that div. If you substite the keyword scroll for auto your browser should only add scrollbars when they are needed (which is usually what you want. You usually need to add a width and height value to the element too, otherwise it would just expand to fit its contents, defeating the whole point.

Overflow can also be used in conjunction with positioning, and is often nessacary when you use fixed positioning as some content may not be visible for users using low resolutions.

Note: Opera 6 and earlier have problems with this type of overflow, but this should be fixed in version 7.

Common Core-Attributes

These are attributes that most HTML elements have. They can be used in conjunction <iframe>, layers and <object>:

id
Similar to the name attribute, but is the newer method
    <layer id="NewsFrame">
class
For use with Cascading Style Sheets (CSS). Imports all properties from the specified class(es) in the style sheet. Separated by spaces if providing more than one.
    <ilayer class="border">
And something like this may appear in your style sheet:
    .border { border: 1px solid #000000; }
style
Additional information (via CSS) about how the element should look/behave
    <iframe style="margin: 5px 10px;">
title
Short description about the element
    <object title="Main content frame">

All tutorials and content written by Rick Bull unless otherwise stated
Page's last update: Friday, 15th January 2010; 12:54:00 GMT +0000
The reference article for the iframe section in this document was the W3C's HTML 4.01 Specification: Frames.
The reference article for the layers section in this document was Netscape's Developer Reference on Layers.
The reference article for the object section in this document was the W3C's HTML 4.01 Specification: Objects.
Top of the page