...

View Full Version : sub navbar won't let me click on it



cosmicgirl
01-03-2006, 01:16 AM
Hi !

I'm trying to redesign my site with CSS - I am completely new to CSS which I only started to study yesterday... - and I'm having problems with my sub navbar: it does appear when you hover over one of the items in the global navbar, but won't let you click on the sub items :confused: :

http://perso.wanadoo.fr/euan.morton/index2.htm

Any help would be much appreciated ! Thanks ! :)

soulfly
01-03-2006, 06:16 AM
hi CG,
post ur code.

soulfly
01-03-2006, 06:22 AM
hi CG,
check this link. It should solve ur problem. This link was posted by canadianjameson in this forum.

check here: http://bonrouge.com/br.php?page=dmenu

Regards,
Soulfly

cosmicgirl
01-04-2006, 10:31 PM
Thanks for the link, I did check it but unfortunately... cannot really use it because I am a REAL newbie and don't understand javascript...

I've used one of those ready made Dreamweaver page designs to create my ownpage. I'll post the code of both and explain what I tried to do.

cosmicgirl
01-04-2006, 10:35 PM
This is the code of the original Dreamweaver page design:


<!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_left.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 -->
<div id="pagecell1">
<!--pagecell1-->
<img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl"> <img alt="" src="tr_curve_white.gif" height="6" width="6" id="tr">
<div id="breadCrumb">
<a href="#">Breadcrumb</a> / <a href="#">Breadcrumb</a> / <a href="#">Breadcrumb</a> /
</div>
<div id="pageName">
<h2>Page Name</h2>
<img alt="small logo" src="" height="59" width="66"/>
</div>
<div id="pageNav">
<div id="sectionLinks">
<a href="#">Section Link</a> <a href="#">Section Link</a> <a href="#">Section
Link</a> <a href="#">Section Link</a> <a href="#">Section Link</a> <a href="#">Section
Link</a>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<a href="#">Related Link</a> <a href="#">Related Link</a> <a href="#">Related
Link</a> <a href="#">Related Link</a> <a href="#">Related Link</a> <a href="#">Related
Link</a>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<a href="#">Related Link</a> <a href="#">Related Link</a> <a href="#">Related
Link</a> <a href="#">Related Link</a> <a href="#">Related Link</a> <a href="#">Related
Link</a>
</div>
<div id="advert">
<img src="" alt="" width="107" height="66" /> Advertisement copy goes here.
Advertisement copy goes here.
</div>
</div>
<div id="content">
<div class="feature">
<img src="" alt="" width="280" height="200">
<h3>Feature Title </h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque
a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque
a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque
a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
</div>
<div class="story">
<table width="100%" cellpadding="0" cellspacing="0" summary="">
<tr valign="top">
<td class="storyLeft"> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
<td> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
</tr>
<tr valign="top">
<td class="storyLeft"> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
<td> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
</tr>
<tr valign="top">
<td class="storyLeft"> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
<td> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
</tr>
</table>
</div>
</div>
<div id="siteInfo">
<img src="" width="44" height="22"> <a href="#">About Us</a> | <a href="#">Site
Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | &copy;2003
Company Name
</div>
</div>
<!--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>

cosmicgirl
01-04-2006, 10:37 PM
Here is the code of my own page:


<!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_left.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 10;

//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 10;
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>
<link href="CSS/emx_nav_left.css" rel="stylesheet" type="text/css">
</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">
<a href="index.htm"><img src="pictures/csslayout/logo2desatutopred.jpg" width="497" height="82" border="0"></a>
<div id="utility">
<a href="shop.html">Shop</a> | <a href="searcheuanmorton.com.htm">Search</a> | <a href="updates.html">Updates</a>
</div>
<div id="globalNav">
<img alt="" src="pictures/csslayout/gblnav_left.gif" height="32" width="5" id="gnl"> <img alt="" src="pictures/csslayout/glbnav_right.gif" height="32" width="5" id="gnr">
<div id="globalLink">
<a href="index.htm" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home</a><a href="news.htm" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">News</a><a href="career/careermenu.html" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Career</a><a href="biography/biography.html" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Biography</a><a href="features/featuresmenu.htm" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Features</a><a href="articles/articlessmenu.html" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Articles</a><a href="photos/photosmenu.html" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">Photos</a><a href="multimedia/multimediamenu.html" id="gl8" class="glink" onmouseover="ehandler(event,menuitem8);">Multimedia</a><a href="http://euanmorton.proboards19.com/" id="gl9" class="glink" onmouseover="ehandler(event,menuitem9);">Forum</a><a href="links/linksmenu.html" id="gl10" class="glink" onmouseover="ehandler(event,menuitem10);">Links</a>
</div>
<!--end globalLinks-->
</div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
</div>
<div id="subglobal2" class="subglobalNav">
<a href="news.htm">Latest</a> | <a href="newsarchive.html">Archive</a>
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">Musicals</a> | <a href="#">Theatre</a> | <a href="#">Television</a> | <a href="#">Cinema</a> | <a href="#">Workshops & pilots</a> | <a href="#">Early work</a> | <a href="#">Awards won</a> | <a href="#">Nominations</a>
</div>
<div id="subglobal4" class="subglobalNav">
</div>
<div id="subglobal5" class="subglobalNav">
<a href="#">Exclusive interviews</a> | <a href="#">Press quotes</a> | <a href="#">Magazine covers</a>
</div>
<div id="subglobal6" class="subglobalNav">
<a href="#">Interviews with Euan</a> | <a href="#">Articles entirely devoted to Euan</a> | <a href="#">Articles mentioning Euan</a> | <a href="#">With pics / links to vids</a> | <a href="#">International press</a> | <a href="#">Other articles of interest</a>
</div>
<div id="subglobal7" class="subglobalNav">
<a href="#">Professional photos</a> | <a href="#">On stage and on TV</a> | <a href="#">Public appearances</a> | <a href="#">With fans</a> | <a href="#">Early days</a>
</div>
<div id="subglobal8" class="subglobalNav">
<a href="#">Audio</a> | <a href="#">Video</a>
</div>
<div id="subglobal9" class="subglobalNav">
</div>
<div id="subglobal10" class="subglobalNav">
</div>
</div>
<!-- end masthead -->
<div id="pagecell1">
<!--pagecell1-->
<div id="pageName">
<img name="" src="pictures/csslayout/headers/mfpheader.gif" width="703" height="25" alt="">
</div>
<div id="pageNav">
<div class="production">
<h3>PRODUCTION</h3>
<span class="leftsubsectionitemsbold">Author:</span> David Grimm
<span class="leftsubsectionitemsbold">Director:</span> Peter Dubois</p>
</div>
<div class="production">
<h3>CAST</h3>
<span class="leftsubsectionitemsbold">Euan Morton</span> as Molly
<p><span class="leftsubsectionitemsbold">Suzanne Bertish</span> as Lady Vanity Lustforth</p>
<p><span class="leftsubsectionitemsbold">Wayne Knight</span> as Sir Peter Lustfort</p>
<p><span class="leftsubsectionitemsbold">Saxon Palmer</span> as Dick Dashwood</p>
<p><span class="leftsubsectionitemsbold">Michael Stuhlbarg</span> as Will Blunt</p>
<p><span class="leftsubsectionitemsbold">Emily Swallow</span> as Hermione Goode</p>
</div>
<div id="advert"> </div>
</div>
<div id="content">
<div class="feature">
<img src="pictures/forarticles/measureforpleasure.jpg" alt="" width="132" height="177">
<p>
A neo-Restoration comedy of manners, set in the 18th century, but told with a uniquely contemporary feel. The play's protagonist is a 20-year-old male prostitute who passes himself off as a chambermaid, a valet, a landed gentleman and his wife, a beautiful country lass and a handsome rake. The piece looks at our obsessions with pursuing happiness and our all too often inability to recognize it when we have it within our grasp.</p>
</div>
<div class="story">
<h3>Synopsis</h3>
<p>
Blunt is in love with Molly, a young transvestite prostitute. But when Blunt rescues him from a life on the streets, he doesn't count on Molly falling in love with Dashwood, the handsome womanising rake. Restoration comedy meets modern sex farce in this romantic adventure, exploring the elusive nature of happiness; featuring mistaken identities, duels and double-dealings, gay marriage, and the obligatory sex cave.</p>
<p>&nbsp;
</p>
</div>
<div class="story">
<table width="100%" cellpadding="0" cellspacing="0" summary="">
<tr valign="top">
<td class="storyLeft"> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
<td> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
</tr>
<tr valign="top">
<td class="storyLeft"> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
<td> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
</tr>
<tr valign="top">
<td class="storyLeft"> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
<td> <p>
<a href="#" class="capsule">Capsule Story</a> Cras enim. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut eu augue. Integer risus wisi, semper eu, congue quis, lobortis
ut, massa. Vestibulum auctor vestibulum lectus. Vivamus neque. Cras
lobortis. Aenean ut turpis eu libero volutpat euismod. <a href="#">Donec</a> eget
lectus vitae ligula ornare tempor. Vivamus scelerisque lorem a elit.
Sed id mauris.
</p></td>
</tr>
</table>
</div>
</div>
<div id="siteInfo">
<img src="" width="44" height="22"> <a href="#">About Us</a> | <a href="#">Site
Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | &copy;2003
Company Name
</div>
</div>
<!--end pagecell1-->
<br>
<script type="text/javascript">
<!--
var menuitem1 = new menu(10,1,"hidden");
var menuitem2 = new menu(10,2,"hidden");
var menuitem3 = new menu(10,3,"hidden");
var menuitem4 = new menu(10,4,"hidden");
var menuitem5 = new menu(10,5,"hidden");
var menuitem6 = new menu(10,6,"hidden");
var menuitem7 = new menu(10,7,"hidden");
var menuitem8 = new menu(10,8,"hidden");
var menuitem9 = new menu(10,9,"hidden");
var menuitem10 = new menu(10,10,"hidden");
// -->
</script>
</body>
</html>

cosmicgirl
01-04-2006, 10:39 PM
Here the CSS file of the original page:


/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url("bg_grad.jpg") fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}


/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
border-left: 1px solid #ccd2d2;
}


/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}

#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url("glbnav_background.gif");
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
background-image: url("glblnav_selected.gif");
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}


/************** feature styles *****************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
}


/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url("bg_nav.jpg");
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}


/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/

cosmicgirl
01-04-2006, 10:40 PM
... and here's the CSS of my own page:


/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Tahoma, Arial, Verdana, sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(../pictures/csslayout/bg_grad2.jpg) fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial, sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}


/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 150px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
border: 1px solid #666666;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px dotted #666666;
border-bottom: 1px dotted #666666;
font: small Tahoma, Arial, Verdana, sans-serif;
}

#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
border-left: 1px dotted #666666;
}


/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
padding: 0px 0px 25px 10px;
margin: 0px;
border-bottom:2px dotted #ccd2d2;
}

#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(../pictures/csslayout/glbnav_background.gif);
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:-1px;
}

#gnr {
position: absolute;
top: 0px;
right:-1px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
background-image: url(../pictures/csslayout/glblnav_selected.gif);
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 118px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}


/************** feature styles *****************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
font-family: Tahoma, Arial, Verdana, sans-serif;
text-align: justify;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
}


/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
font-family: Tahoma, Arial, Verdana, sans-serif;
text-align: justify;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
clear: both;
border-top: 1px dotted #666666;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(../pictures/csslayout/bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}


/************* relatedLinks styles **************/

.production{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px dotted #666666;
}

.production h3{
padding: 10px 0px 2px 0px;
text-align: center;
}

.production a{
display: block;
}


/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/
.leftsubsectionitemsbold {
font-weight: bold;
}

cosmicgirl
01-04-2006, 10:45 PM
Trouble started when I decided to insert my logo at the top of the page and to replace:


<div id="masthead">
<h1 id="siteName">Site Name</h1>

with:


<div id="masthead">
<a href="index.htm"><img src="pictures/csslayout/logo2desatutopred.jpg" width="497" height="82" border="0"></a>

Thanks for any help !

_Aerospace_Eng_
01-04-2006, 10:56 PM
Ugh, learn to use the VB CODE (http://www.codingforums.com/misc.php?do=bbcode) tags when posting code.

Use this for your closesubnav function

function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 150)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}

cosmicgirl
01-04-2006, 11:54 PM
Sorry about the ugly post, :o just fixed it.

I've tried your code and the sub navbar now works perfectly, thank you so much ! :thumbsup:

Any tips on how to understand the part of the code that you've changed ? I have no idea what 107 and 150 correspond to...

_Aerospace_Eng_
01-05-2006, 12:19 AM
They correspond to the distance from the start of the subdiv. Its reading the mouse located. I think the 150 is the distance from the top of the browser to the end of your subnav div. That number could probably be decreased until its just right. To be safe though 150 sounds good.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum