asked on

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?

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

ASKER CERTIFIED SOLUTION

Sudaraka Wijesinghe

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

scrathcyboy

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.

SOLUTION

remorina

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Waterstone

ASKER

Scrathcyboy,

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

Thanks

scrathcyboy

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.

Waterstone

ASKER

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.

SOLUTION

scrathcyboy

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Waterstone

ASKER

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 Wijesinghe

Glad to help. Thanks for the points.

scrathcyboy

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.

Waterstone

ASKER

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