Difference Between Frames and Iframes [Archive]

Aragoth

11-10-2006, 06:54 PM

Sorry if this is in the wrong category, but I have heard a lot about iFrames, and I was wondering how they differ from actual frames. Can anyone relieve me of my ignorance?

GITs

11-11-2006, 12:06 AM

iFrames are Inline elements (ok, if you want to be picky, they are actually block elements), basically they are a frame which you can place inside the page, unlike with normal frames, where you have to divide the whloe page up...

an iFrame is just a frame inside a page, which has another page in it...

damn, thats harder to explain than i thought it would be :S

chechu

11-11-2006, 11:15 AM

To give you an idea: http://www.casariegoart.com
The content of this site on the right, and the scrollers at the bottom (twice moving text and twice banners) are placed in an <iframe>.
This would not be possible with frames.

Aragoth

11-12-2006, 05:43 AM

Are iFrames done with the same coding, but using <iframe> instead of <frameset>? And are the frames positioned manually?

chechu

11-12-2006, 10:33 AM

Check out the following code from http://www.casariegoart.com :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Welcome to the official website of Ceci Casariego Mazereel</TITLE>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">

<script src="topwindow.js"></script>

<link href="stylesheet.html" rel="stylesheet" type="text/css">

</head>

<style type="text/css">

</style>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<table width="706" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="394">
<table width="706" height="394" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="174"><table width="100%" height="394" border="0" cellpadding="0" cellspacing="0" background="bg.gif">
<tr>
<td height="21" style="padding-left:140px;" valign=bottom>
<a href="sitemapEN.html" target="content"><img src="guests.gif" border="0" alt="sitemap"></a>
<a href="http://www.belstat.be/viewstat_1p.asp?UserID=chechu&lang=en&ma=" target="_blank"><img src="counter.gif" border="0" height="15" width="16" alt="Belstat webcounter"></a>
</td>
</tr>
<tr>
<td height="101" valign="middle"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" height="17" align="right" valign="middle"> </td>
<td align="left" valign="middle">&nbsp&nbsp<img src="arrow.gif" width="9" height="9"></td>
<td><a href="contentEN.html" target="content" onMouseOver="a('home');return true" onMouseOut="b()">home</a></td>
</tr>
<tr>
<td width="15" height="17" align="right" valign="middle"> </td>
<td align="left" valign="middle">&nbsp&nbsp<img src="arrow.gif" width="9" height="9"></td>
<td><a href="kunstcreatieEN.html" target="content" onMouseOver="a('creations');return true" onMouseOut="b()">creations</a></td>
</tr>
<tr>
<td height="17" align="right" valign="middle"> </td>
<td align="left" valign="middle">&nbsp&nbsp<img src="arrow.gif" width="9" height="9"></td>
<td><a href="kunstopdrachtEN.html" target="content" onMouseOver="a('commissions');return true" onMouseOut="b()">commissions</a></td>
</tr>
<tr>
<td width="15" height="17" align="right" valign="middle"> </td>
<td align="left" valign="middle">&nbsp&nbsp<img src="arrow.gif" width="9" height="9"></td>
<td><a href="currartEN.html" target="content" onMouseOver="a('artistic data');return true" onMouseOut="b()">artistic data</a></td>
</tr>
<tr>
<td height="17" align="right" valign="middle"> </td>
<td align="left" valign="middle">&nbsp&nbsp<img src="arrow.gif" width="9" height="9"></td>
<td><a href="contactEN.html" target="content" onMouseOver="a('contact');return true" onMouseOut="b()">contact</a></td>
</tr></table></td>
</tr>
<tr>
<td height="61" align="center" valign="middle">
<img src="logo.gif" width="170" height="60" border="0">
</td></tr>
<tr>
<td height="91" align=center valign=bottom>
<table width="170" height="90" border="0" cellspacing="0" cellpadding="0" background="green.gif">
<tr>
<td align="center" valign="bottom">
[here is the menu] </td></tr>
</table></td>
</tr>
<tr>
<td align=center valign=bottom>
<iframe src="marqueeEN.html" name="marquee" frameborder=0 width=160 height=95 scrolling=no></iframe>
</td>
</tr>
<tr>
<td align="center" valign="top">
</td>
</tr>
</table></td>
<td width="4"> </td>
<td><table height="394" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align=center valign=bottom background="bgtekst1.gif">
<iframe src="contentEN.html" name="content" height=252 width=521 frameborder=0 scrollable=yes></iframe>
</td>
</tr>
<tr>
<td height="118" width="530" background="bg1.gif">
<table height=100% width=100%><tr><td align=center valign=bottom width="165">
<iframe src="splashsponsor1.html" name="sponsor" height=95 width=160 frameborder=0 scrolling=no></iframe> </td><td align=center valign=bottom width="165">
<iframe src="splashEN.html" name="splash" height=95 width=160 frameborder=0 scrolling=no></iframe> </td><td align=center valign=bottom width="165">
<iframe src="splashsponsor2.html" name="sponsor" height=95 width=160 frameborder=0 scrolling=no></iframe> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</table></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

You will see lots of crap in the code (have deleted a few things), but in bold you will see that you can place an <iframe> anywhere you like, as big as you like. Go to the site and click on menu items on the left. You will see that the content (<iframe>) is scrollable and easy to overview by the visitor, but the banners at the bottom are not scrollable.

If you need help on your site: send the code and where you need the <iframe> to be placed.