Solved

CSS Frames vs. iframes

Posted on 2009-07-07
13
668 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
  • 6
  • 3
  • 2
  • +1
13 Comments
 
LVL 3

Expert Comment

by:razor19
Comment Utility
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
Comment Utility
>> 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
Comment Utility
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
 
LVL 40

Author Comment

by:evilrix
Comment Utility
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
Comment Utility
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
Comment Utility
>>  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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 3

Expert Comment

by:razor19
Comment Utility
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
Comment Utility
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.
Comment Utility
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
Comment Utility
> (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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now