Forum Moderators: not2easy
My plan is simple. I want to use a header menu from a template above the forums of my site...just to keep things looking consistent & to have good navigation. It uses javascript to give several 'subglobal' links to each global link and formats it nicely with CSS
Now the problem is this...the javascript seems to be working at least partially...but the menu itself is malformed. Its not showing any proper colours.
I have the contents of the html above the <?php whatever>. Any ideas as to why this isn't work?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="emx_nav_right.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY <48)¦¦(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);">
<div class="skipLinks">skip to: <a href="#content">page content</a> ¦ <a href="pageNav">links on this page</a> ¦ <a href="#globalNav">site navigation</a> ¦ <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead">
<h1 id="siteName">Site Name</h1>
<div id="utility">
<a href="#">Utility Link</a> ¦ <a href="#">Utility Link</a> ¦ <a href="#">Utility
Link</a>
</div>
<div id="globalNav">
<img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global
link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global
link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global
link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global
link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global
link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global
link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global
link</a>
</div>
<!--end globalLinks-->
<form id="search" action="">
<input name="searchFor" type="text" size="10">
<a href="">search</a>
</form>
</div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
<a href="#">subglobal1 link</a> ¦ <a href="#">subglobal1 link</a> ¦ <a href="#">subglobal1
link</a> ¦ <a href="#">subglobal1 link</a> ¦ <a href="#">subglobal1 link</a> ¦ <a href="#">subglobal1
link</a> ¦ <a href="#">subglobal1 link</a>
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> ¦ <a href="#">subglobal2 link</a> ¦ <a href="#">subglobal2
link</a> ¦ <a href="#">subglobal2 link</a> ¦ <a href="#">subglobal2 link</a> ¦ <a href="#">subglobal2
link</a> ¦ <a href="#">subglobal2 link</a>
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">subglobal3 link</a> ¦ <a href="#">subglobal3 link</a> ¦ <a href="#">subglobal3
link</a> ¦ <a href="#">subglobal3 link</a> ¦ <a href="#">subglobal3 link</a> ¦ <a href="#">subglobal3
link</a> ¦ <a href="#">subglobal3 link</a>
</div>
<div id="subglobal4" class="subglobalNav">
<a href="#">subglobal4 link</a> ¦ <a href="#">subglobal4 link</a> ¦ <a href="#">subglobal4
link</a> ¦ <a href="#">subglobal4 link</a> ¦ <a href="#">subglobal4 link</a> ¦ <a href="#">subglobal4
link</a> ¦ <a href="#">subglobal4 link</a>
</div>
<div id="subglobal5" class="subglobalNav">
<a href="#">subglobal5 link</a> ¦ <a href="#">subglobal5 link</a> ¦ <a href="#">subglobal5
link</a> ¦ <a href="#">subglobal5 link</a> ¦ <a href="#">subglobal5 link</a> ¦ <a href="#">subglobal5
link</a> ¦ <a href="#">subglobal5 link</a>
</div>
<div id="subglobal6" class="subglobalNav">
<a href="#">subglobal6 link</a> ¦ <a href="#">subglobal6 link</a> ¦ <a href="#">subglobal6
link</a> ¦ <a href="#">subglobal6 link</a> ¦ <a href="#">subglobal6 link</a> ¦ <a href="#">subglobal6
link</a> ¦ <a href="#">subglobal6 link</a>
</div>
<div id="subglobal7" class="subglobalNav">
<a href="#">subglobal7 link</a> ¦ <a href="#">subglobal7 link</a> ¦ <a href="#">subglobal7
link</a> ¦ <a href="#">subglobal7 link</a> ¦ <a href="#">subglobal7 link</a> ¦ <a href="#">subglobal7
link</a> ¦ <a href="#">subglobal7 link</a>
</div>
<div id="subglobal8" class="subglobalNav">
<a href="#">subglobal8 link</a> ¦ <a href="#">subglobal8 link</a> ¦ <a href="#">subglobal8
link</a> ¦ <a href="#">subglobal8 link</a> ¦ <a href="#">subglobal8 link</a> ¦ <a href="#">subglobal8
link</a> ¦ <a href="#">subglobal8 link</a>
</div>
</div>
<!-- end masthead -->
<!--end pagecell1-->
<br>
<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");
// -->
</script>
</body>
</html>
-Thanks in advance for any help
If this is so, then the relative link is incorrect:
<link rel="stylesheet" href="emx_nav_right.css" type="text/css"
unless the page you are working on and the stylesheet it is trying to call are in the same directory you will have to ammend the path of the href so that the browser is looking in the right directory for the stylesheet.
eg <link rel="stylesheet" href="mysite/myforum/emx_nav_right.css" type="text/css">
Its tough being a newb, lol.
<style type="text/css">
<!--
body {
background-image: url(bg_grad.jpg);
}
-->
</style>
The file bg_grad.jpg is is the proper directory...hmm
Eg: don't use href="../images/logo.gif" but your full web address (http etc) then "/images/logo.gif". That way it can't fail!
Note: PHP sometimes requires an even fuller path, to the root of the actual host's server! (Eg: "/home/sites/site82/web/images/logo.gif")! This is required when writing files for some reason. Standard includes are OK with the normal web address.
