Solved

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

Posted on 2010-11-13
11
1,117 Views
Last Modified: 2012-05-10
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?

Thanks
<html>

<head>

<title>My Site</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<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">

  </frameset>

</frameset>

<noframes> 

<body bgcolor="#FFFFFF" text="#000000">

</body>

</noframes> 

</html>

Open in new window

0
Comment
Question by:Waterstone
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 200 total points
ID: 34128573
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/
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34132397
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.
0
 
LVL 22

Assisted Solution

by:remorina
remorina earned 200 total points
ID: 34133234
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
0
 

Author Comment

by:Waterstone
ID: 34141982

Scrathcyboy,

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

Thanks
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34142357
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.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:Waterstone
ID: 34144286
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.
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 100 total points
ID: 34147681
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.
0
 

Author Closing Comment

by:Waterstone
ID: 34180109
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.
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34180164
Glad to help. Thanks for the points.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34181280
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.
0
 

Author Comment

by:Waterstone
ID: 34181429
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
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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 …

760 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

19 Experts available now in Live!

Get 1:1 Help Now