CSS to replace html frames with a center content area for all pages of the site

Hello Experts,

I'm comnverting an old frames-based site to css and want to elimiinate frames.

The old index.html page is attached.  It's the standard top, left menu, mainframe structure.
Each menu pick is a link like this
<a href="TestPage01.htm" target="mainFrame">

Is there a way to use CSS & div tags to replicate the function of opening the content pages in the mainframe without reloading the entire page each time?  Somehting like target = div name?

<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<frameset rows="*" cols="205,*" frameborder="NO" border="0" framespacing="0"> 
  <frame name="leftFrame" scrolling="YES" noresize src="Sitendex.htm">
  <frameset rows="184,*" frameborder="NO" border="0" framespacing="0" cols="*"> 
    <frame name="topFrame" noresize scrolling="NO" src="Site_Header.htm">
    <frame name="mainFrame" src="MainWindow.htm">
<body bgcolor="#FFFFFF" text="#000000">

Open in new window

Who is Participating?

Improve company productivity with a Business Account.Sign Up

Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
You can't load external HTML file content into a DIV tag using CSS or HTML.
However this can be done using AJAX (JavaScript). Easiest way to go is using jQuery .load() function as described in http://api.jquery.com/load/
To load external webpage content, you need an I-FRAME (IFRAME), which is a modern and valid way to have multiple page contents on a single page.  You have your main page, then load the other web page into an iframe.  This is correctly SEOd and as the borders can be hidden, the iframe does not appear like a frame, and the code is not obsolete as is the FRAMESET concept of a frame based site.
remorinaConnect With a Mentor Commented:
Hi Waterstone,
As sudaraka has mentioned, CSS and HTML alone can't load external content within the a div or without refreshing the page, you need to use AJAX for this if you need to eliminate frames/iframes

An easier way would be to use iframes as well like scrathcyboy mentioned but it would have its limitation as well in terms of height, scrollbars etc..

there are plenty of ways to easily achieve this with some little work using jQuery or Mootools, I've attached a simple example below, which can load both inline content within the page or external files like (test.htm)  however you need to keep in mind that all your external links that you are loading withint the page or using AJAX has to be within the same domain, which means you can't for example load an external site within your div.   JQuery-load-content---pages-in-d.zip
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.

WaterstoneAuthor Commented:


Can youy tell me how iFrames would replace the frames in my code above?  Not sure how it applies.

1.  There is no frameset page -- this is the biggest obstacle to SEO if S.E. don't get beyond the frameset page.  You do NOT want a frameset page in the modern world of HTML programming, it is archaic.

2.  IFrames are pages or components of a page within a main HTML page -- they act independently in that they are not a component of the page layout, as in a DIV structure.

3.  Iframes can be used to add components to the page.  You always have a main page layout, and any modular part of the page (like the main data for a link) can be sent to the iframe.

4.  Frames design is rigid, and ugly.  Iframes are flexible and blend perfectly with the page.  If they data comes from the same website as the main page, the size CAN be scaled, and many people do not realize this.  If it is an external page, they size is fixed.

You should research IFrames before you prejudge them.  I have many MANY super efficient websites using them -- the code is tiny compared to a complex DIV layout.
WaterstoneAuthor Commented:
I understand that framesets are less than ideal, hence the question.  I also get that iframes are great, the cat's meow, better than sliced bread, etc.  I am not prejudging them, I'm asking about them.  Can you provide sample code for a simple page that would do what I need to do using iframes?  Something with a header, left menu bar and main content section.  It does not have to work the same way but has to maintain the look across all pages in the site.  I'm guessing that with iframes I may have a template that gets the header and navbars from external pages but has the content of the individual page in each page, but that's a guess.
scrathcyboyConnect With a Mentor Commented:
You design one and only one complete page for the website --

the master page has the header, banners, links, nav bar, and whatever else you want to put on the site.
Then in the middle of the page layout, you put an iframe, say called 'main' that takes the content of each link when it is clicked.

Then each link would be like -- <A href= "about.html" target = "main"> About Us </A>

You see that by specifying the target as 'main' -- you are sending the contents of each link into the central iframe.  A typical iframe size would be 650 width 500 high (or whatever height you need to avoid scroll bars appearing).

So the site design boils down to an incredibly simple content -- one master page -- all links going into the "content" window in the center, which has no border (if you want it that way), so appears just like part of the page.  

The real PLUS of this design is that the content links can be very simply constructed -- even with a simple word processor -- because they only need to have the content of the page, not all the HTML layout.

As for examples, there are many sites all over the internet done like this, but right now I don't have an example to list here.  I can give some example iframe code though --

<IFRAME id="main" src="intro.html" width="770" height="485" frameborder="0" margintop="0" marginbottom= "0" marginheight="0" marginwidth="0" scrolling="NO"></IFRAME>

That is from one of my sites.  You can plug that into the center of a page layout with links and construct all links to put their HTML content into the iframe, and you have a working model.  I don't give links to my own sites on this public BBS as a matter of principle.  But if I find others, I will link to them.
WaterstoneAuthor Commented:
Thanks to all.  Each responder supplied a good workable solution.  Those that provided examples that I could plug in and work with were awarded more points.
Sudaraka WijesingheWeb Application ProgrammerCommented:
Glad to help. Thanks for the points.
The  "workable" solution was the one I expended a lot of extra effort to give the details about, and it got the least points.  Ajax is not a realistic solution to architect an entire website, all a person has to have is limited javascript functionality and the entire website is BROKEN.
WaterstoneAuthor Commented:
scrathcyboy:  I'm sorry that you feel slighted. I appreciate your help, as well as the help of the others who repsonded, and I split the points in a way that I thought was fair based on what each reponse dod for me.  That is really the only barrometer I have.  While your arguments in favor of your solution were detailed I was not looking for a debate on the relative merits of each approach or a detailed tutorial.  I've worked with frames since they were the latest and greatest and understand the concepts behind them.  iFrames are simply a new, more modern version of frames.

I come to EE because I've been developing for over thirty years and am, most often, looking for a simple code example. I don't expect those responding to code my site for me, but a working piece of code that I can plug into a page and work with does more for my understanding than a detailed explanation of why it is the best strategy.

iFrames are your preferred method of addressing situations like the one I asked about.  The other responders gave theirs.  I learned from all three of you, but learned a bit faster and easier from the other two; hence the split.  If points were awarded by the word you would definately be ahead, but alas.  Again, I'm sorry you feel slighted.  It was not my intention.

Best regards
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.

All Courses

From novice to tech pro — start learning today.