We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

CSS Frames vs. iframes

evilrix
evilrix asked
on
Medium Priority
735 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.
Comment
Watch Question

Commented:
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
evilrixSenior Software Engineer (Avast)
CERTIFIED EXPERT

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.

Commented:
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

evilrixSenior Software Engineer (Avast)
CERTIFIED EXPERT

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.

Commented:
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.
evilrixSenior Software Engineer (Avast)
CERTIFIED EXPERT

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.

Commented:
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.
evilrixSenior Software Engineer (Avast)
CERTIFIED EXPERT

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.
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

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.
Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
evilrixSenior Software Engineer (Avast)
CERTIFIED EXPERT

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.
evilrixSenior Software Engineer (Avast)
CERTIFIED EXPERT

Author

Commented:
Thanks.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.