|
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, 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.
title element, which is used to give a short description of the frame's contents
<iframe longdesc="LeftFrameDesc.htm"> <iframe name="LeftFrame"> <iframe src="Left.html"> <iframe frameborder="0"> <iframe marginwidth="25"> <iframe marginheight="10">yes,
no or auto (depends on frame contents); auto is the default value
<iframe scrolling="no">top,
middle, bottom, left and right.
<iframe align="center"> <iframe height="120">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 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
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.
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.
Both LAYER and ILAYER have the same attributes which are documented here:
<layer above="Layer1"> <layer background="Images/LayerBack.jpg"> <layer below="Layer2"> <layer bgcolor="#ff00ff"> <layer clip="0,0,50,50"> <layer height="75%"> <layer left="10"> <layer pagex="25"> <layer pagey="10"> <layer src="LayerContent.htm"> <layer onblur="alert('Ahhh, my eyes... My beautiful eyes!!');"> <layer onfocus="alert('Oh wait it's OK now. Phew!');"> <layer onload="alert('There you go, I've loaded your page for you.');"> <layer onmouseout="alert('Don't you like me any more?');"> <layer onmouseover="alert('Oh, giving me some attention now are we?');"> <layer top="25"> <layer visibility="hidden"> <layer width="150"> <layer z-index="5">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 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.
There are couple of methods that can be used to create a frames effect using CSS:
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 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.
These are attributes that most HTML elements have. They can be used in conjunction
<iframe>,
layers and
<object>:
<layer id="NewsFrame"> <ilayer class="border"> .border { border: 1px solid #000000; } <iframe style="margin: 5px 10px;"> <object title="Main content frame">
|
