1 reply [Last post]
thumbslinger
Offline
Regular
Austin, TX
Last seen: 8 years 22 weeks ago
Austin, TX
Timezone: GMT-5
Joined: 2005-03-23
Posts: 42
Points: 14

I've got the template of the Macromedia site from DreamweaverMX2004, but I'm having trouble figuring out what needs to be changed to get a duplicate list of links that 'drop up'.

link1 | Link2 | link3
-----------------------
-----------------------
link4 | Link5 | link6

rollover any link and you get another horizontal list of links as a sub category between those dashed lines:

link1 | Link2 | link3 (rollover 'link1")
link1a | Link1b | link1c | link1d
link4 | Link5 | link6

The sub category links (link1a, link1b etc) are all basic rollovers.

Now, I've got all that, but I'm trying to get the rollovers for
link4 | link5 | link6 to appear in the same area; between the dashed lines in this illustration.

Here's the html:

<!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 = 8;

//menu constructor
function menu(allitems,thisitem,startstate){ 
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem;  
	this.numberofmenuitems = 8;
	this.caller = document.getElementById(callname);
	this.thediv = document.getElementById(divname);
	this.thediv.style.visibility = startstate;
}
//THE ONE I ADDED
function menu2(allitems,thisitem,startstate){ 
  callname= "glb"+thisitem;
  divname="superglobal"+thisitem;  
	this.numberofmenuitems = 8;
	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>
<style type="text/css">
<!--
.style1 {color: #330066}
-->
</style>
</head>
<body onmousemove="closesubnav(event);"> 
<div id="masthead"> 
  <h1 id="siteName">maybe put image up here also or instead.</h1> 
 
  <div id="globalNav" class="style1"> 
    <div id="globalLink"> 
      <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">General Information</a>
	  <a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Exhibitors Area</a>
	  <a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Floor Plan & Exhibitor List</a>
	  <a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Special Events</a>
	  <a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Press Center</a> 
    </div> 
	<div id="globalLink2" class="style1"> 
      <a href="#" id="glb1" class="glink" onmouseover="ehandler(event,Newmenuitem1);">Conference Center</a>
	  <a href="#" id="glb2" class="glink" onmouseover="ehandler(event,Newmenuitem2);">Hotel & Transportation</a>
	  <a href="#" id="glb3" class="glink" onmouseover="ehandler(event,Newmenuitem3);">Visitors Area</a>
	  <a href="#" class="glink">Home</a>
	  <a href="#" class="glink">FAQs</a> 
	  <a href="#" class="glink">Contact us</a> 
    </div> 
  </div> 
  <!-- end globalNav --> 
  
  <div id="subglobal1" class="subglobalNav"> 
    <a href="#">Fair At-A-Glance</a> | <a href="#">About the Organizers</a> | <a href="#">The Venue, Show Hours, Sponsors
	</a> | <a href="#">Exhibits Profile</a> | <a href="#">Exhibits Detail</a>
  </div> 
  
  <div id="subglobal2" class="subglobalNav"> 
    <a href="#">Critical Dates</a> | <a href="#">Participation Details</a> | <a href="#">Standard Booth Sample</a> | <a href="#">Brochure</a> | <a href="#">Application Form</a> | <a href="#">Announcement</a> | <a href="#">Exhibitor Manual</a> | <a href="#">Marketing Plan</a> | <a href="#">Sponsorship Opportunities</a> 
  </div> 
  
  <div id="subglobal3" class="subglobalNav"> 
    <a href="#">Floor Plan</a> | <a href="#">Exhibitor List</a>
  </div> 
  
  <div id="subglobal4" class="subglobalNav"> 
    <a href="#">Opening Ceremony</a> | <a href="#">Welcome Cocktail Reception</a>
  </div> 
  
  <div id="subglobal5" class="subglobalNav"> 
    <a href="#">Press Releases</a> | <a href="#">Media Partners</a> | <a href="#">Press Registration</a> 
  </div> 
  
  <div id="subglobal6" class="superglobalNav"> 
    <a href="#">Conference-At-A-Glance</a> | <a href="#">Conference Program</a> | <a href="#">Payment Details & Online Registration</a>
  </div> 
  
  <div id="subglobal7" class="superglobalNav"> 
    <a href="#">Hotel</a> | <a href="#">Transportation</a> | <a href="#">Traveling Guide</a> 
  </div>  
  
  <div id="subglobal8" class="superglobalNav"> 
    <a href="#">Online Registration</a> | <a href="#">Fair-At-A-Glance</a> | <a href="#">Exhibits Profile</a> | <a href="#">Exhibits Detail</a> 
  </div>
  
</div> 
<!-- end masthead --> 
<div id="pagecell1"> 
  <!--pagecell1-->  
  <div id="content">  
    <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> 
    </div> 
  </div> 
  <!--end content --> 
  <div id="siteInfo">    <a href="#">About Us</a> | <a href="#">Site
    Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | &copy;2005
    company here. </div> 
</div> 
<!--end pagecell1--> 
<br> 
<script type="text/javascript">
    <!--
      var menuitem1 = new menu(8,1,"hidden");
			var menuitem2 = new menu(8,2,"hidden");
			var menuitem3 = new menu(8,3,"hidden");
			var menuitem4 = new menu(8,4,"hidden");
			var menuitem5 = new menu(8,5,"hidden");
			var menuitem6 = new menu(8,6,"hidden");
			var menuitem7 = new menu(8,7,"hidden");
			var menuitem8 = new menu(8,8,"hidden");
			
	        var Newmenuitem1 = new menu2(3,1,"hidden");
			var Newmenuitem2 = new menu2(3,2,"hidden");
			var Newmenuitem3 = new menu2(3,3,"hidden");
    // -->
    </script> 
</body>
</html> 

and the relevant css items:

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

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

#content{
	padding: 0px 10px 0px 0px;
	margin:0px 178px 0px 0px;
	border-right: 1px solid #ccd2d2;
}
/************* globalNav styles ****************/

#globalNav{
position: absolute;
width: 100%;
min-width: 640px;
height: 96px;
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: 7px;
	height: 11px;
	min-width: 640px;
	padding: 0px;
	margin: 0px;
	left: 11px;
	z-index: 100;
}
/** NEW BOTTOM STYLE**/
#globalLink2{
	position: absolute;
	top: 68px;
	height: 22px;
	min-width: 640px;
	padding: 0px;
	margin: 0px;
	left: 10px;
	z-index: 110;
}


a.glink, a.glink:visited{
  	font-size: small;
  	color: #fff;
	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 **************/
/***** "top: 84px" is controlling where the sublinks go **/
.subglobalNav{
	position: absolute;
	top: 84px;
	left: 0px;
	/*width: 100%;*/
	min-width: 640px;
	height: 20px;
	padding: 0px 0px 0px 10px;
	visibility: hidden;
	color: #000;
}
/** This was added by me**/
.superglobalNav{
	position: absolute;
	top: 84px;
	left: 0px;
	/*width: 100%;*/
	min-width: 640px;
	height: 20px;
	padding: 0px 0px 0px 10px;
	visibility: hidden;
	color: #000;
}

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

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

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

.superglobalNav a:hover{
	color: #000;
}

wow, yeah. It's half-way working. I just can't figure out where to add space or what to increase so that the rollovers of the bottom row of links will appear in the middle like the top row does.

If anyone has a suggestion, I'd appreciate it. I'm totally new to CSS so I'm learning as I go. Thanks.

thumbslinger
Offline
Regular
Austin, TX
Last seen: 8 years 22 weeks ago
Austin, TX
Timezone: GMT-5
Joined: 2005-03-23
Posts: 42
Points: 14

url

Here's a url of the html and css being used in the above post. Just thought being able to see it above might be easier than viewing source:

http://www.johnsoncreativegroup.com/test/