Lucky for us, the <iframe> tag behaves just how we need
it to — by assigning an HTML source document, we can fill the floating
frame with whatever we deem proper. An iframe loads an HTML document onto
the page the same way one would call up an image. It works like this:
<iframe width=150 height=200 src="blah.html">
</iframe>
Our floating frame will now display whatever's included in
blah.html.
Right about now, you're probably asking yourself, "Yeah, that's nice, but
how in the heck do I 'float' the darn thing into the position I want?" Good
question. After all, things that "float" aren't usually all that stable.
Well, again, we need to think of the <iframe> tag in
terms of the <img> tag. A floating frame will show up
wherever you place it in the content of the page: If you stick the tag
halfway down your HTML document, the iframe will show up halfway down your
Web page. Unlike regular frames, floating frames aren't persistent. They
will scroll up and down (and off) the page, just like the rest of the
content.
If you want your frame to line up against either side of the browser
window, you just need to place an align=left or
align=right within the <iframe> tag, like so:
<iframe width=150 height=200 src="blah.html" align=left>
</iframe>
Now we have an inline frame that's 150 pixels wide, 200 pixels tall, and
aligned left.
Of course, if you want to actually float the frame above other elements
within the page, you could use absolute positioning, a floating
<div> layer, and stylesheet declarations to put the content
anywhere you desire. That's the beauty of iframes and dHTML — remember
that your iframe content is served inline, just like an image.
Using layers, your basic code looks like this:
<div id="floatframe">
<iframe width=150 height=200 src="blah.html" align=left>
</iframe>
</div>
And your CSS positioning code looks like this:
<style type="text/css">
#floatframe {position:absolute;
left: 200px;
top: 200px;
width: 150px;
height: 200px;
z-index: 100
}
</style>
Here's an example where I've used absolute positioning to float an iframe over a picture. Feel free to study and admire it.
If all this stylesheet nonsense is new to you, you should read Taylor's excellent dHTML Tutorial. It covers stylesheets, scripting, layers, navigation elements, legos —
the whole shebang.
Once you're familiar with the basics, you're ready to tackle the
frameborder and various margin attributes.
next page»
