Need advice on alternative navigation schemes to current navigation bar with iframe for content

I'm seeking advice on how to solve a very standard web design issue.  At my website ( I have a side bar with navigation links and a main content panel.  The main content panel is implemented as an iframe and the content pages are separate and viewed on the main site only though the iframe of the content panel.

This technique works fine, but has the known downside that you can't link directly to any given subpage.  In other words it always says in address bar whether your at the history home page or your at with some other content in the iframe.  The problem is I really need all of these other pages that I allow to be viewed through my navigation bar to be separate pages.  Some of the content isn't even hosted on my server.

What are my options for working around this?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

>>Some of the content isn't even hosted on my server.

Does complicate things slightly, but I'd look at a good two column CSS layout.  Your iframes not only prohibit bookmarking but are going to mess up your SEO rank, as the spiders will have some trouble indexing your site.

I would also break to forum out completely, and just have a link back to the main site, or at least make the left nav significantly narrower.

You may have to revert back to an iframe or use some other method to break the same domain policy for the out of site content.  Maybe using an AJAX library like Dojo for those parts.
mdobblesAuthor Commented:
It is a two column CSS layout.  The issue is that in the second column of the layout I use an iframe.  I think I have to use the iframe because of all the scripts and ASP activity on the subpages I wrote and because of the third party content I include.  I thought of making the main frame be an ASP.NET page and I'd parse out of the URL the subpage for example to get to the forum I might have the URL  When the page came up I would parse the url and put the forum in the iframe.  This seems a little hokey to me though and I was wondering what was the way people really did these things.
With ASP...


<div id="header"><!--#include file="myHeader.asp"--></div>

<div id="leftNav"><!--#include file="myMenu.asp"--></div>

<div id="content"><!--#include file="content.asp"--></div>


Save each page as it's own name, a don't parse the URL.

If the page retrieves off-site content then...

<div id="content><iframe src=""></iframe></div>

JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

Almost every web site I have has one template page with only the main content missing.

A real example:

Option Explicit

<!--#include virtual="/ee/CDOMailInclude.asp"-->
<!--#include virtual="/ee/include/thisPageViewed.asp"-->
' no browser caching of this page !! to be used on all pages
Response.ExpiresAbsolute = Now() - 1

' do not allow proxy servers to cache this page !! to be used on all pages

Dim articleName
articleName = "Page Title"
<html lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/include/css/all.css">
<link rel="stylesheet" type="text/css" href="/ee/include/ee.css">
<script type="text/javascript" src="/include/allPages.js"></script>
<script type="text/javascript">


<div id="topmenu"><!--#include file="topMenu.htm"--></div>
<div id="banner"><!--#include virtual="include/banner.htm"--></div>
<div id="mainmenu"><!--#include file="mainMenu.htm"--></div>
<noscript><p>You need JavaScript to view this example.</p></noscript>
<div><h1>Page Subject</h1></div>

<div id="theExample">example</div>

<div class="code"><pre>example code</pre></div>

<div id="pageCopyright"><!--#include virtual="include/copyright.htm"--></div>
<div id="legal"><!--#include virtual="include/legal.htm"--></div>


I write a lot of example code for this and other tech help sites.

Need a new page? Open the template and add the new content the save as a new name.  All the navigation, headers, copyright, etc. etc. are maintained as well as the layout.

Maybe my site has multiple sections,

       + includes   +
                          + css +
                                    - allPages.css
                          - allPages.js
                          - copyright.htm
                          - legal.htm
                          - banner.htm
       + examples +
                           - topMenu.htm
                           - mainMenu.htm
                           - pages ...
       + articles     +
                           - topMenu.htm
                           - mainMenu.htm
                           - pages ...
       + personal  +
                           - topMenu.htm
                           - mainMenu.htm
                           - pages ...


Then you'll see the same template in each sub-folder, but each sub folder may have a different navigation pages.

You only have one template page you can use everywhere, so you can think of the content division as your IFRAME in a sense.
I dont see the problem.  You just LOAD a full webpage into the Iframe, and there it is.

Link to external --

As long as you provide the full URL, the page goes right in the Iframe.  Remember, an iframe is like a totally separate browser window, except embedded in the first.

If you want the location and title bar to show the full link, just put that in the link, as normal).

Since I dont see the problem, what am I missing?
mdobblesAuthor Commented:
The solutions suggested are all missing the point.

First, scratchcyboy:
The problem with my site is that all the navigation links are targeted to the iframe on my page.  This means that no matter what page you are on at my website, the address in the navigation bar is  This is a problem because I'm going to start adding a lot more pages to my site and I want people to be able to bookmark individual pages.  Also I want to put advertisements on google that direct people to individual pages -- something I can't do with my current scheme.

I definitely understand how to do css div's.  In fact my site is completely based on css div's.  That's how I do my title bar, and my two column navigation and content sections.  In fact my iframe is in a css div.

The issue is this if I have one page that is my master template and if I have multiple separate pages that are included in that master template as iframes, then I'm starting to think that the only way I can give people the ability to directly navigate to subsections of my site is to provide a scheme where I parse the url such as for example having take you to the forum section of my site.

The subsections must remain on their own pages separate from the template main page.  I might be missing something in the sugestions, but so far the only way I've heard that I can have ONE MASTER MAIN PAGE with navigation, title bar etc..., and MULTIPLE SEPARATELY MAINTAINED CONTENT PAGES is my suggestion of parsing the url and programatically creating the ability to link directly to subsections.

I guess I didn't explain well enough, but imagine the following request:

That link never goes to your master page.

So you decide to do:

That goes to your master page, but how do you get the content into the content area?

Using your current IFRAME set up you can parse the query string for cat and page and load the IFRAME with a dynamic URL created from those parameters, or you can maintain all your pages in a database and retrieve them into any element, or you could use AJAX to go get the page content and put it in the desired element.

All have various problems, not the lease of which would be performance, and the second example is not SEO friendly.

So go back to the first URL.  On Apache you could use mod rewrite to rewrite the URL and serve up the desired content.  But you are on IIS.

So, to gain the advantage of having only one master page, lets break that master page into its constituent parts.


Your default home page then looks like this:

<!--#include file="master_banner.aspx"-->
<!--#include file="master_nav.aspx"-->
<!--#include file="master_content.aspx"-->
<!--#include file="master_footer.aspx"-->

You night think great!

I can just add parse the command line for the page and write that as an include in the content section of my master page, but the include occurs prior to the ASP code on IIS,

So your closest alternative is for each content page to have the following structure:

<!--#include file="master_banner.aspx"-->
<!--#include file="master_nav.aspx"-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras dolor. Sed sed neque. Duis eros justo, bibendum in, placerat eget, ullamcorper vel, nibh. Praesent urna arcu, sagittis eget, semper laoreet, tempus non, augue. In a pede. Vestibulum consequat eleifend sem. Duis tristique tortor ultricies massa. Duis sapien eros, posuere sit amet, rhoncus non, venenatis bibendum, tellus. Donec dui tortor, dignissim quis, eleifend eget, fermentum a, massa. Maecenas vel enim vitae sapien condimentum eleifend. Duis hendrerit luctus dui. Donec sem dui, posuere a, consectetuer eget, pretium aliquet, turpis. Vestibulum posuere porta lacus. Sed convallis molestie purus. In hac habitasse platea dictumst.
<!--#include file="master_footer.aspx"-->

This will also work for those few off site pages:

<!--#include file="master_banner.aspx"-->
<!--#include file="master_nav.aspx"-->
<iframe src="http://........>
<!--#include file="master_footer.aspx"-->

So you have in essence what you are asking for, in that the content for the master page is separate from the content of the individual page contents and is maintained separately.  You also have the content pages wholly separate, other than they have includes to the master pages content.  They are small, build dynamically on load.

If you look at master pages in .NET design environments, this is what is occurring:

Since your site uses .NET, you could download a free trial of MS Expression Web and check out the master pages and dynamic web templates.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
"The problem with my site is that all the navigation links are targeted to the iframe on my page.  This means that no matter what page you are on at my website, the address in the navigation bar is  This is a problem because I'm going to start adding a lot more pages to my site and I want people to be able to bookmark individual pages.  Also I want to put advertisements on google that direct people to individual pages -- something I can't do with my current scheme."

You can rewrite the status bar to show the correct link VERY EASILY !!!!  Just put it in the link.

But to encapsulate sites like Yahoo and Google in an IFRAME is fighting everyone.  People don't like it, the companies like Google hate it, and they have all kinds of code on their pages to "break out of" any frames OR IFRAMES.  Besides which, it looks like your content, so you have a LIABILITY issue too.

You are missing the obvious way to do this, that everyone expects.  Keep your main page as a launching point for all these links, and open each other sites content is a SEPARATE window.  That is what people expect, and want.  I personally HATE sites that try to cram content that was meant for a full 1024x768 display (almost every major site today) into someone else's window.  It is fighting the obvious.

Make multiple windows and your site will be much more acceptable.  I ahve done what you want to do, and it works for only 25% of pages.  The other 75% need to occupy their OWN resizable window.
From what I can see, the iframe is not needed at all.  Just make the content div a regular div and remove the "target='MainFrameTarget'" from your navigation links.  Then all you should have to do is add your header and navigation sections to those corresponding pages.

The only page I can see that you might want to keep in the iframe is the Timeline considering how wide it is.
mdobblesAuthor Commented:
I think I have a reasonable solution now.  I just updated my site.  Basically what I did is use the .NET masterpages idea to handle most of my formatting, then my individual pages I swapped out content.  I still needed to use an iframe for my page called "timeline" because it has a bunch of scripts that were in conflict with the scripts that I have on my master page.
The timeline is a great concept. I like it a lot. It deserves more attention from a development standpoint to be more fluid...but it can really set your site apart.

Good luck with everything.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.