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?
CSS Codes
Junior Coders
Difference Between Frames and Iframes
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?
Junior Coders
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
Senior Coders
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.
Junior Coders
Are iFrames done with the same coding, but using <iframe> instead of <frameset>? And are the frames positioned manually?
Senior Coders
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">
<!--
body
{
scrollbar-face-color:white;
scrollbar-arrow-color:white;
scrollbar-track-color:white;
scrollbar-shadow-color:white;
scrollbar-highlight-color:white;
scrollbar-3dlight-color:white;
scrollbar-darkshadow-Color:white;
background-attachment: fixed;
}
-->
</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">  <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">  <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">  <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">  <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">  <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.
Posting Permissions
Reply With Quote
Bookmarks