Pls help: Position elements on HTML pg using functions, external .js, .css files.

Hours of troubleshooting & searching dev sites on web & still stuck. Help much appreciated. Sorry for length but complex question ? am trying to be clear.

I?m trying to write javascript nav buttons to a specific place on html pages using an external .js file with multiple functions and a CSS level 2 (using ‘position’) style sheet.

Can get functions in external .js file to preload images and write HTML to document using the ?onload? method, but style sheet will not execute correct position or other attributes. I did find info on the web that ?it is possible to specify exactly where an element will be placed using DHTML and CSS positioning?, but not how.

Q. Am I just torturing myself? Is it worth it? Seems this is a nice efficient way to re-use navigation on multiple pages.
Q. Should I put a function in the <div class=?nav?> tag in the .html file or should the <div> tag go in the function in the external .js file?
Q. Is there a concept I?m missing here?
Q. Not sure where the document.close() should go when I?m using more than one function- one for each document.write?
Q. If there should be only one document.write() for both nav and header <div> tag sets, what is the proper syntax for the HTML in the ()? Do spaces mess up the JavaScript?

BEFORE the JavaScript function for the navigation html is added, the following is true:

AFTER a JavaScript function with document.write() is added, the following is true:

STYLE SHEET
Here is the class definition from my external style sheet:
div.nav {position: absolute; top: 0px; left: 0px; width: 160px; height: 348px;}
div.header {position: absolute; top: 0px; left: 160px; width: 620px; height: 88px;}

FUNCTIONS
Function to load navigation and header in div tags according to style sheet:

function loadnav(){
document.write(‘<div class=”nav”>Navigation stuff goes here</div>’)
}

function loadheader(){
document.write(‘<div class=”header”>Header stuff goes here ? graphic continuation of navigation (no rollovers) placed at top of page to right of nav bar.</div>’)
}
document.close()

Function to preload images for navigation rollovers (deleted much of code to spare you the details as I know this works):
function preloadimg(){
if (document.images)
{
//IMAGE OBJECTS FOR ACTIVE IMAGES
var img1on = new Image();
img1on.src = “images/navHome160x33_on.gif”;

etc.

//IMAGE OBJECTS FOR INACTIVE IMAGES
var img1off = new Image();
img1off.src = “images/navHome160x33_off.gif”;
}

//The else statement below sets the value of these “dummy” variables to an empty string so older browsers will know how to interpret the code.

else
{
img1on = “”
etc.
img1off = “”
etc.
document.img1 = “”
etc.
}
//FUNCTION TO ACTIVATE AN IMAGE ONMOUSEOVER
function imgOn(imgName){
if (document.images){
document.images[imgName].src = eval(imgName + “on.src”);
}
}
//FUNCTION TO ACTIVATE AN IMAGE ONMOUSEOUT
function imgOff(imgName){
if (document.images){
document.images[imgName].src = eval(imgName + “off.src”);
}
}

}

[upl-file uuid=b73422cd-47b0-45a8-bb05-8a6dfb79af3c size=2kB]indextestallfunctions2.txt[/upl-file]

Also in #JavaScript _↴