CSS Frames Question

**coverland** · 06-15-2008, 04:54 AM

I'm helping with a site that doesn't allow raw html so can't use standard frames. That said, I'm trying to cheat the system a bit by using css frames but haven't used them before so am hoping for some help. I'm looking at the frames code here:
http://www.dynamicdrive.com/style/la...-frame-layout/

but can't figure out where in that code, my "indexframe.htm" and "choose.htm" should reside to bring my older html frames to life. The general layout of the link and associated coding is almost identical to what I've coded in html before (notepad style :-).

any input is appreciated,
Chris

**coverland** · 06-15-2008, 03:06 PM

How can I make this:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Right Frame Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontent{
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0;
left: 0;
right: 200px; /*Set right value to WidthOfFrameDiv*/
bottom: 0;
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 200px 0 0; /*Set value to (0 WidthOfFrameDiv 0 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>

<div id="framecontent">
<div class="innertube">

<h1>CSS Right Frame Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(25)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>

</div>
</div>

</body>
</html>

do this:
<html>
<FRAMESET cols="78%, *">
<FRAME src="indexframe.htm" name="index">
<FRAME src="choose.htm" name="choose">
</FRAMESET>
</html>

something in the code above needs to point to the files indexframe.htm and choose.htm but haven't been able to determine where to place in code. thanks for any help.

**Medyman** · 06-15-2008, 04:02 PM

something in the code above needs to point to the files indexframe.htm and choose.htm but haven't been able to determine where to place in code. thanks for any help.

I think you're getting confused with terminology here. CSS "frames" aren't just a replication of HTML framesets in a different "language". What ddadmin is showing there is how to replicate the look of using a frameset with plain ol' HTML and CSS to combat all the negative side-effects of using frames.

So, there is no "pointing" to external files. You have to directly include the markup of those external files into one HTML file.

So, take everything between the <body> tags in your "indexframe.html" and paste it in place of the highlighted:

Code:

<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(25)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>

</div>
</div>

If you're including any javascript and/or external CSS files in your indexframe.html or choose.html files, be sure to include those within the <head> section of this new page.

And take everything in the <body> of "choose.html" and paste it in place of the highlighted below:

Code:

<div id="framecontent">
<div class="innertube">

<h1>CSS Right Frame Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

**coverland** · 06-15-2008, 06:08 PM

Thanks for the reply and I've made progress thanks to you.

Perhaps you can tell me how to guarantee that links in the narrow right panel strip (what one might call the control panel), are displayed ONLY in the wider left panel.

Prior to now and within frames it would simply be a link like this in the control panel:

<a href="spring07_js.htm" TARGET="index">2007-08 Season</a>

with TARGET="index" directing where the activity took place.

thanks,

**coverland** · 06-15-2008, 07:02 PM

I've tried a variety of things for TARGET and nada so far.

Tried
TARGET="#maincontent">
TARGET="maincontent">
TARGET="index">

and others but there MUST be a way of keeping it all within the same page as you do with frames. TIA

**Medyman** · 06-15-2008, 09:13 PM

Originally Posted by coverland

Thanks for the reply and I've made progress thanks to you.

Perhaps you can tell me how to guarantee that links in the narrow right panel strip (what one might call the control panel), are displayed ONLY in the wider left panel.

Prior to now and within frames it would simply be a link like this in the control panel:

<a href="spring07_js.htm" TARGET="index">2007-08 Season</a>

with TARGET="index" directing where the activity took place.

thanks,

See, that's what I meant by you confusing terminology and functionality. The ability to target certain portions of the site are not features that can be done in basic HTML. This is the kind of thing that framesets are used for.

Getting into advanced scripting, you can use AJAX to do this. There are a few script on DD that may help you in this regard.

It really sounds like you need to rework your design/coding to work in whatever system/CMS you are using.

**coverland** · 06-16-2008, 01:40 PM

Thank you for the reply. I spoke to the site admin on this other site that I referenced in my initial post and he indicated that the reason the frameset tag wouldn't work in the HTML is because they're already using frames on the site and not being able to use the frameset tag is what drove me to looking for alternatives. When I happened across the code for this post, I thought I might have happened across a suitable alternative but perhaps not. Clearly it would have worked best if it emulated frames and it seemed so close. If menu selections on the right side (narrow strip) showed up in the work space on the left side, I'd pretty well have frames emulated. Anyway, thanks again.

**Medyman** · 06-16-2008, 02:42 PM

Originally Posted by coverland

Thank you for the reply. I spoke to the site admin on this other site that I referenced in my initial post and he indicated that the reason the frameset tag wouldn't work in the HTML is because they're already using frames on the site and not being able to use the frameset tag is what drove me to looking for alternatives. When I happened across the code for this post, I thought I might have happened across a suitable alternative but perhaps not. Clearly it would have worked best if it emulated frames and it seemed so close. If menu selections on the right side (narrow strip) showed up in the work space on the left side, I'd pretty well have frames emulated. Anyway, thanks again.

You might want to take a look at using iframes. It sounds like that's what you're after here.