Jump to content

Archived

This topic is now archived and is closed to further replies.

me1000

Modding Dreamweaver Template

Recommended Posts

I found a template in dreamweaver that uses CSS, I was just messing around but I found the awsome menu it had so I took it lol...

well im having trouble first I tried it with the template page and got it to work fine. the I copied all the code over to a temp page to test it out. but the submenus aret showing up like they should. they are supose to show up right under the main menu. they look a lot like the ones on macromedia's website. Im not sure if this is a javascript error or a css error my guess is CSS but I havnt got a clue...

I hope you can help me.
here is the code for the page

[code]    
<style type="text/css">
<!--
body, td, th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}
body {
    background-color: #738799;
}
a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
}
a:visited {
    color: #FFFFFF;
    text-decoration: none;
}
a:hover {
    color: #CCCCCC;
    text-decoration: underline;
}
a:active {
    color: #CCCCCC;
    text-decoration: none;
}
a:link {
    text-decoration: none;
}
-->
</style>
<link rel="stylesheet" href="emx_nav_left.css" type="text/css" />

<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 6;

//menu constructor
function menu(allitems,thisitem,startstate){
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem;  
  this.numberofmenuitems = allitems;
  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);">
<table width="795" height="388" border="2" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000" style="border-collapse: collapse">
  <tr>
    <td width="216" rowspan="2" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000" valign="top">
    <div align="left" style="border-right-style: solid; border-right-width: 1pt; padding-right: 4pt"><center>
      <img src="http://www.startrek4u.com/images/uperleft_logo.gif" width="210" height="123" border="0" />
    </center>
</div></td>
    <td width="571" height="40" valign="middle" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000" style="border-bottom-style: solid; border-bottom-width: 1">
<div id="globalLink"> <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">News / Updates </a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Series Sections </a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Movies</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Special Features </a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Community</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Global news </a>
    <!--end globalLinks-->
    </div>
  <!-- end globalNav -->
  <div id="subglobal1" class="subglobalNav">Latest News and updates From Site Name </div>
  <div id="subglobal2" class="subglobalNav"> <a href="#">1st Section</a> | <a href="#">3rd Section</a> | <a href="#">4th Section</a> | <a href="#">2nd Section</a> | <a href="#">6th Section</a> | <a href="#">5th Section</a> </div>
  <div id="subglobal3" class="subglobalNav"> <a href="#">Movie: I</a> | <a href="#">Movie: II</a> | <a href="#">Movie: III</a> | <a href="#">Movie: IV</a> | <a href="#">Movie: V</a> | <a href="#">Movie: VI</a> | <a href="#">Movie: VII</a> | <a href="#">Movie: VIII</a> | <a href="#">Movie: IX</a> | <a href="#">Movie: X</a></div>
  <div id="subglobal4" class="subglobalNav"> <a href="#">Multimedia</a> | <a href="#">Downloads</a> | <a href="#">Poll</a> | <a href="#">LCARS 24</a> | <a href="#">For Webmasters</a> | <a href="#">Tutorials</a></div>
  <div id="subglobal5" class="subglobalNav">The Site Forums</div>
  <div id="subglobal6" class="subglobalNav">All news from the world </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> -->

<!-- end masthead -->[/code]

and this is the code for the stylesheet

[code]/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #FFFFFF;
padding: 0px;
margin: 0px;
}

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

}

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

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

#globalLink{
    position: absolute;
    top: 18px;
    height: 41px;
    min-width: 640px;
    padding: 0px;
    margin: 0px;
    left: 325px;
    z-index: 100;
    width: 581px;
}


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

a.glink:hover{
      color: #CCCCCC;
}

.skipLinks {display: none;}

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

.subglobalNav{
    position: absolute;
    top: 40px;
    left: 325px;
    width: 100%;
    min-width: 640px;
    height: 20px;
    padding: 0px 0px 0px 10px;
    visibility: hidden;
    color: #000000;
}

.subglobalNav a:link, .subglobalNav a:visited {
    font-size: 11;
    color: #000000;
}

.subglobalNav a:hover{
    color: #333333;
}[/code]

Thanks,

Share this post


Link to post
Share on other sites
This looks like a Javascript thing more then anything. Unless you moved the navigation anywhere, in which case maybe it's the lack of relative positioning.

Share this post


Link to post
Share on other sites
it showed up once when i moved my mouse over the first link and it was right behind the main links.

heres the original code that works

[code]<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<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 = allitems;
    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 id="masthead">
  <h1 id="siteName">&nbsp;</h1>
  <div id="utility"> <a href="#">Utility Link</a> | <a href="#">Utility Link</a> | <a href="#">Utility Link</a> </div>
  <div id="globalNav">
    <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-->
  </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 -->
<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>
[/code]

when I take out
[code]<h1 id="siteName">&nbsp;</h1>[/code]

it quits working

so I try to take out just the &nbsp; part of it and it still doesnt work!

BTW that 2nd javascript in the page (at the bottom) is in my template page too

Share this post


Link to post
Share on other sites
[!--quoteo(post=363015:date=Apr 9 2006, 12:03 PM:name=me1000)--][div class=\'quotetop\']QUOTE(me1000 @ Apr 9 2006, 12:03 PM) [snapback]363015[/snapback][/div][div class=\'quotemain\'][!--quotec--]when I take out
[code]<h1 id="siteName"> </h1>[/code]

it quits working

so I try to take out just the   part of it and it still doesnt work!

BTW that 2nd javascript in the page (at the bottom) is in my template page too
[/quote]
Certain tags won't display if they are empty. The non-breaking space is commonly used in this situation to force the tag to display. That may, or many not, have anything to do with why the sub-menus aren't working.

Share this post


Link to post
Share on other sites
well the problem was positioning from the start. I am able to get it to show up but only f I come form the bottom and it will only stay showing up if im within the bottom quarter of the text/link heres the revised css

[code]/************* globalNav styles ****************/

#globalNav{
position: relative;
top: 25px;
width: 100%;
min-width: 640px;
height: 25px;
color: #FFFFFF;
padding: 0px;
margin: 0px;
}

#globalNav img{
    margin-bottom: 5px;

}

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

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

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


a.glink, a.glink:visited{
      font-size: 12;
      color: #ffffff;
    font-weight: bold;
    margin: 0px;
    padding: 2px 5px 3px 5px;
    /*border-right: 1px solid #000000;*/
}

a.glink:hover{
    text-decoration: underline;
}

.skipLinks {display: none;}

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

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

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

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

/********************* end **********************/[/code]


Also once you move over it you have to move it about 150 pixels dow the screen before it hides again!

Share this post


Link to post
Share on other sites
Its the javascript! I figured it out! now I just have to align the submenus and the main menus

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.