potentially stupid div and CSS question

[babytux]

I feel very stupid for even asking this, but I'm hoping someone here can help me.

I'm putting a site together (which I'm hand coding in a very basic text editor) and decided to go with a layout similar to the one on this page: http://www.dynamicdrive.com/style/la...-frame-layout/ but using a navigation panel (on the top "frame") like this: http://www.dynamicdrive.com/style/cs...rizontal-menu/

However, I'm not quite sure how to set it up so that I can use the bottom div as a "target" for the site pages or is that even possible? Or is there an another way of doing things and if so, how?

Any help will be greatly appreciated and I thank you for your time.

[boogyman]

in a frame structure you use the target="" attribute of the anchor tag and set that equal to the name of the frame you want it to populate... for instance

<frame src="top.html" name="navigation">
<frame src="body.html" name="main">

top.html

<a href="page.html" target="main">Page</a>

there is no need to do that for all of the pages that are in the "body" frame as they will already be in the frame. you would only need to use the target="" if you are attempting to access another frame.

[babytux]

So, and forgive me for sounding so stupid, I'd still need to use the frame attribute even if I'm using divs and currently have my page set up using divs?

For example, I have in my head section something similar to the first link I posted in my first post to set up the divs (with part of the navigation panel similar to the second link), whereas for the body, I have it set up so that it appears something like this:

<div id="nav">
<div class="page">
<ul class="bevelmenu">
<li><a href=link url>link name</a></li>
<li><a href=link url2>link name2</a></li>
<li><a href=link ur3l...>link name3...</a></li>
</ul>
</div>
</div>
<div id="body">
<div class="page">
</div>
</div>

For the second div, in the example I provided, it would be "body" where I'd want the links to open up into. How would I go about doing that?

I do appreciate all the help.

[alexjewell]

Oh, so you've eliminated frames from the picture entirely?

Well, then each piece isn't a different page then. You'd have each link go to a different page and you wouldn't make them any different than a regular link - but the whole page refreshes to the page the link was linked to, meaning the frame effect of just having the "main" piece refresh to a new page while the navigation stays wont occur.

If this effect is what you want, go with frames or AJAX. If it doesn't really matter, well, you're on the right track.

[babytux]

Basically, I want to have my page setup so that the navigation bar is toward the top of the page (under a banner) and have the links at the top (for the various sections of my site) to open up underneath that, but in it's own section, similar in premise to having a top frame and a bottom frame--but without actually using frames.

I'm hoping to avoid using frames if possible. Is it possible to set things up so that an external style sheet could be used somehow or is there another alternative? I'm fairly new to coding with CSS and likewise don't really know much about AJAX yet.

[babytux]

After thinking it over a bit longer, I'm going to try and redo my layout using includes for the navigational header and a footer file I want to add as well and see how that turns out. Thanks for all the help, though!

[HarryO22]

Here is the code you are looking for:

/***********************************************
* Dynamic Ajax Content- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var bustCacheVar = 0; //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedObjects = "";
var rootDomain = "http://" + window.location.hostname;
var bustCacheParameter = "";
function getPageByAjax(url, containerId) {
var pageRequest = false;
if (window.XMLHttpRequest) { // if Mozilla, Safari etc
pageRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // if IE
try {
pageRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
pageRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
} else {
return false;
}
pageRequest.onreadystatechange = function() {
loadPage(pageRequest, containerId);
}
if (bustCacheVar) { // if bust caching of external page
bustCacheParameter = (url.indexOf("?") != -1) ? "&" + new Date().getTime() : "?" + new Date().getTime();
}
pageRequest.open('GET', url + bustCacheParameter, true);
pageRequest.send(null);
}
function loadPage(pageRequest, containerId) {
if (pageRequest.readyState == 4 && (pageRequest.status == 200 || window.location.href.indexOf("http") == -1)) {
document.getElementById(containerId).innerHTML = pageRequest.responseText;
}
}
function loadobjs() {
if (!document.getElementById) {
return;
}
for (i = 0; i < arguments.length; i++) {
var file = arguments[i];
var fileref = "";
if (loadedObjects.indexOf(file) == -1) { // Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js") != -1) { // If object is a js file
fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", file);
} else if (file.indexOf(".css") != -1) { //If object is a css file
fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref != "") {
document.getElementsByTagName("head").item(0).appendChild(fileref);
loadedObjects += file + " "; // Remember this object as being already added to page
}
}
}
Create your divs and direct the href to the div (my div is contentarea):

<li><a href="welcome.html"
onclick="getPageByAjax(this.href," 'contentarea');return=""
false="">Home</a> </li>

I hope this helps.

[babytux]

Thanks. I'll consider it, but do you have a link to where this script is located?