Solved

CSS Frames vs. iframes

Posted on 2009-07-07
13
676 Views
Last Modified: 2013-11-05
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
Comment
Question by:evilrix
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
  • 2
  • +1
13 Comments
 
LVL 3

Expert Comment

by:razor19
ID: 24799353
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
 
LVL 40

Author Comment

by:evilrix
ID: 24801234
>> 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
 
LVL 6

Expert Comment

by:gxp071
ID: 24801750
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Author Comment

by:evilrix
ID: 24801769
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
 
LVL 6

Expert Comment

by:gxp071
ID: 24801808
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
 
LVL 40

Author Comment

by:evilrix
ID: 24821018
>>  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
 
LVL 3

Expert Comment

by:razor19
ID: 24828993
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
 
LVL 40

Author Comment

by:evilrix
ID: 24833877
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
 
LVL 42

Expert Comment

by:David S.
ID: 24835335
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
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 24866605
> (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
 
LVL 42

Assisted Solution

by:David S.
David S. earned 500 total points
ID: 24866612
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
 
LVL 40

Author Comment

by:evilrix
ID: 24866930
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
 
LVL 40

Author Closing Comment

by:evilrix
ID: 31600827
Thanks.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Placeholder text not disappearing in Contact Form 7 2 28
Change div area and length 1 43
100% tall div not scrollable on iPhone 3 27
GET error with Font Awesome 3 28
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question