• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 695
  • Last Modified:

CSS Frames vs. iframes

Hi all,

I am currently working on a web site for my wife for her business. I am by no means an experienced web developer (although I am an experienced C++ developer). I've thrown together something that works and looks ok. To give each page a standard look and feel I have used CSS for the colour scheme and iframes to import the same header and footer on each page (the header contains a simple menu made up of HTML links to all the pages).

I've read that iframes can be simulated using CSS and that (for reasons I can't remember right now) this is the preferable way to go. I know when I looked at some CSS for doing this my brain just fried and I really wasn't convinced it was worth the hassle

So my question is 2 fold. Firstly, is there really any great advantage in using CSS frames over iframe and (b) I'd really like to see a (VERY) simple of a CSS frame along with the equivalent iframe (with some links to some very simple reference material if possible).

Many thanks in advance.

-Rx.
0
evilrix
Asked:
evilrix
  • 6
  • 3
  • 2
  • +1
2 Solutions
 
razor19Commented:
Hey There -

You probably don't have to use frames of any kind. Most of the time, you can use server side includes (SSI) to accomplish the same thing. If you're a c++ guy - it would be the equivilent to your #include

Although - you need to make sure your web host supports them (i'm sure they do) and if you are editting the file locally, and do not have a local web server running, you won't see them included locally if you preview your pages.

Typically - on your page it would look something like this:

<!--#include virtual="path/filename.html" -->

Check out these links:
http://www.yourhtmlsource.com/sitemanagement/includes.html
http://www.andreas.com/faq-ssi.html
http://en.wikipedia.org/wiki/Server_Side_Includes
0
 
evilrixSenior Software Engineer (Avast)Author Commented:
>> Most of the time, you can use server side includes (SSI) to accomplish the same thing.
I can't assume my host will support SSI (because most free hosts don't) so this all needs to be done using HTML/CSS.
0
 
gxp071Commented:
if you host supposts PHP which is a pretty safe bet, you can use a php inclulde  just by changing the file extention of your file to php and adding the line below.

<?php include("path/filename.html"); ?>  e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<?php include("path/nav.html"); ?>
<?php include("path/left.html"); ?>
<?php include("path/content.html"); ?>
</body>
</html>

Open in new window

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
evilrixSenior Software Engineer (Avast)Author Commented:
Ok, to save everyone some time I ONLY was a HTML/CSS solution. I really am NOT interested in any server side code! This is why I asked for a CSS solution in a CSS TA. Please save yourself and me some time by not posting unless you can offer a solution that matches the criteria stated in the question.
0
 
gxp071Commented:
CSS cant actually include "page content", so when people compare iframes to CSS what there actually compare is the ability to contain content within a scroll panel/box.

IF you cant run php or html includes in you code to include the repeated content in the page CSS cant help you.  and You have to use frames, or iframes. to get the job done.

Iframes take substationally longer to load, that's the main disadvantage compared to server side includes & css styling.
0
 
evilrixSenior Software Engineer (Avast)Author Commented:
>>  is the ability to contain content within a scroll panel/box.
Ok, so I'd like to explore how to do that... then if I can find a host that will allow PHP (which I am perfectly comfortable with using) then I'll have a nice way to inject code and use CSS to format it as a frame like presentation. I am only after a very simple example that I can follow and then build upon... a link or two to an easy to understand reference would be nice.
0
 
razor19Commented:
You could use CSS and SSI to do this. SSI is no different then PHP include.

You like your header to have a scroll bar? That's the only purpose to having a "frame".

Do you have a place where we can see the source code of this page?? I'm sure I could write the code to do what you want in 10 seconds. I just need a visual example of what you have with an explanation of where you want to go with it.
0
 
evilrixSenior Software Engineer (Avast)Author Commented:
Ok, so I am after an example of simulating a frame using CSS. It doesn't need to have any reference to the current site nor use any server site php or cgi (I will figure out how to make it dynamic later). I just want a simple example (containing static HTML for the links is fine) of how to simulate a frame that I can learn and extrapolate from.
0
 
David S.Commented:
Here's an example of using CSS to put scrollbars on an element:
http://www.dynamicsitesolutions.com/css/scrolling-element/

Resize your browser window so see how the examples change based on the width of the viewport.
0
 
David S.Commented:
> (a) Details of the advantage in using CSS frames over iframe

It wasn't clear to me that you wanted details about that. Anyway, gxp071 mentioned one of the disadvantages of using iframes. This pages lists several more:
http://www.dynamicsitesolutions.com/html/reasons-to-avoid-frames-and-iframes/


> (b) A (VERY) simple example of a CSS frame along with the equivalent iframe

Here's an example.
0
 
David S.Commented:
Apparently zip files containing HTML files aren't allowed anymore. You'll need to rename them from .txt to .html
css-versus-iframe.zip
0
 
evilrixSenior Software Engineer (Avast)Author Commented:
Kravimir,

Thanks for the follow up. I've take a look at this when I get home. I can always cancel the deletion request so rest assured, if the info assists me I'll close the question appropriately.

Thanks.

-Rx.
0
 
evilrixSenior Software Engineer (Avast)Author Commented:
Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 6
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now