Iframes

Iframes provide an easy way to display a different webpage inside a webpage. Iframes can easily be styled - making it easy for visitors to access websites without leaving the current webpage.

Iframes have their strengths and limits: it really depends what it is being used for. For most layouts, iframes are now quite redundant but sometimes iframes can come in really handy - for specific layers and things such as plugboards, iframes are useful for quick navigation. They can also come in handy for cute little websites that don’t really have much content. Be careful how you use iframes though, especially with the content that is being loaded into the iframe. Sometimes it can get really annoying navigating your way through a site through a tiny little window of an iframe when everything inside is 1000x larger than the iframe itself!

EXAMPLE:

Code

<iframe name="main" src="http://elusionerie.com" height="200" width="99%" scrolling="auto"></iframe>

You can add on to this code with the following tags:

• align=”left”, align=”right” or align=”top”, align=”middle”, align=”bottom” - this specifies how the iframe will be aligned in context to the surrounding text and images.
• frameborder=1 or frameborder=0 - specifies if you want a border or not
• name=___ - specifies the name of the iframe. This is handy for use in scripts and link targeting.
• scrolling=”yes”, scrolling=”no” or scrolling=”auto” - specifies if you want the iframe to scroll or not.
• marginheight=”x” or marginwidth=”x” - specifies the top and bottom margins of the iframe.

Styling

You can style iframes using CSS with ID or class tags(see here); or just by using general stye tags on the actual html document. If you are using IDs or classes, format the iframe with a reference to the iframe’s ID/class like so:

<iframe src= “yoursite.com/index.html” width=”100px” height=”100px” name=”main” ID=”main”></iframe>

OR

<iframe src =”yoursite.com/index.html” width=”100px” height=”100px” name=”main” class=”main”></iframe>

In your stylesheet you would have either #main or .main with the relevant formatting attached.

If you are not using stylesheets and only want to style it on the one page only, you can use something like this:

<iframe src =”yoursite.com/index.html” name=”main” style=”width:100px; height:100px, border:none”></iframe>

As you can see, you can use any general style tags with iframes - but I suggest you use IDs or classes instead to make things neater and easier to manage.

Love this post?

 Loading ...

See also...

• Making Hyperlinks
• Tables

Leave a Reply