CSS layout help for a newbie

**mlcampbe** · 04-19-2008, 03:24 AM

I'm trying to use the CSS layout called CSS-top-frame-layout at http://www.dynamicdrive.com/style/la...-frame-layout/ and I can successfully get the first page working.

On this page I have the top frame (framecontent) which include a menu bar and would like to make the bottom frame (maincontent) be updated with new content whenever i click a button on my menu bar. I want this to all happen without the screen re-painting the menu bar. Is this even possible?

For example, my menubar has the items "home, about, contact, downloads" on it. When I click the about button I want the maincontent frame to display some html and just have the browser update that frame, not the top frame.

Does that make sense?

**rangana** · 04-19-2008, 04:26 AM

Have you had worked with iframes

...I see this way possible with what you wanted to achieve

...Or you might want to copy your first page's code...and use it on all your pages,, just change the content..hopes that makes sense

**molendijk** · 04-19-2008, 02:24 PM

Replace your DD-page with this:

Code:

<!--Force IE6 into quirks mode with this comment tag-->
<!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 Top Frame Layout</title>

<script type="text/javascript">
document.write('<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" type="text/html" data="blank.html" width="0" height="0" name="object"><\/object>');

function Transfer_To(InternalId){
try{document.getElementById(InternalId).innerHTML=window.frames['object'].body.innerHTML;}
catch(e){document.getElementById(InternalId).innerHTML=window.frames['object'].document.body.innerHTML;}
}

function Load_External(url){
frames['object'].location.replace(url)
}

function Remove(tag,SomeClass) {
var els = document.getElementsByTagName(tag)
    for (i=0;i<els.length; i++) {
            if (els.item(i).className == SomeClass){
            while (els.item(i).firstChild)
            els.item(i).removeChild(els.item(i).firstChild);
    }
   }
  }
</script>


<style type="text/css">

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

#framecontent{
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 130px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: lightyellow;
color: black;
}


#maincontent{
position: fixed; 
top: 130px; /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
color:black;
padding-left:15px;
padding-top:5px;

}

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

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

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
padding:0;
margin:0;
padding-left:15px;
padding-top:5px;
}

</style>



</head>

<body>


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

<h1>CSS Top Frame Layout</h1>

<a href="javascript:;" onmousedown="Load_External('test1.html')" onclick="Remove('div','remove'); Transfer_To('maincontent');">test1.html</a> | 
<a href="javascript:;" onmousedown="Load_External('test2.html')" onclick="Remove('div','remove'); Transfer_To('maincontent');">test2.html</a>

</div>
</div>


<div id="maincontent" class="remove">
<div class="innertube">
This text will be replaced by other text when you click on a link above.


</div>
</div>


</body>
</html>

Make two external test-files (test1.html and test2.html)

Code:

<html>

<head>

</head>

<body >

TEST 1<br>

This content was extracted from test1.html.<br>This content was extracted from test1.html.<br>This content 

was extracted from test1.html.<br>This content was extracted from test1.html.<br>This content was extracted 

from test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from 

test1.html.<br>This content was extracted from test1.html.<br>

</body>

</html>

Code:

<html>

<head>

</head>

<body >
TEST 2<br>

This content was extracted from test2.html.<br>This content was extracted from test2.html.<br>This content 

was extracted from test2.html.<br>This content was extracted from test2.html.<br>This content was extracted 

from test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from 

test2.html.<br>This content was extracted from test2.html.<br>

</body>

</html>

This way of updating parts of your page is explained here.
---
Good luck,
Arie Molendijk.
IMPORTANT: you have to make a dummy page called blank.html too!!

Thread: CSS layout help for a newbie

Thread Tools

Search Thread

CSS layout help for a newbie

Bookmarks

Bookmarks

Posting Permissions