© ezmacwebdesign

To frame or not to frame..

The examples on the previous page have the HTML pasted into a Snippet. Sometimes its more convenient to use an iframe. An iframe is kind of a page within a page and a typical code is...


<iframe src="URL to the embedded doc" style="width:Xpx;height:Ypx;border:none;overflow:hidden"></iframe>

CSS


The styles are changed inside style="".


height and width are self explanatory


To add a border - "border: solid 2px #fff" -  would create a 2px wide white solid border .


"overflow: hidden" is used to stop scrollbars appearing if the content is too large for the frame. Leave it out change "hidden" to "none" id you want the scrollbars.

The example shown to the left is a responsive website design displayed in an iframe. In other words, the content width is expressed as a percentage so that it adjusts to fit the fixed width of the frame.


An advantage to using an iframe is that the contents can be updated without updating or republishing the web page. This is useful for displaying dated material such as calendars, monthly newsletters and special offers.


The examples on the map page of this site use iframes. The html doc and the other assets are uploaded in a folder to the root folder on the server and the file-name.html is referenced in the iframe code.