Modding Dreamweaver Template

me1000 · April 9, 2006

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">

</style>
<link rel="stylesheet" href="emx_nav_left.css" type="text/css" />

<script type="text/javascript">

</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>
    
    </div>
  
  <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>


[/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,

moberemk · April 9, 2006

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.

me1000 · April 9, 2006

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>

<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">

</script>
</head>
<body onmousemove="closesubnav(event);">
<div id="masthead">
  <h1 id="siteName"> </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>
    
  </div>
  
  <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>

<script type="text/javascript">
    
    </script>
</body>
</html>
[/code]

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

Vorotaev · April 9, 2006

[!--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.

me1000 · April 9, 2006

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!

me1000 · April 9, 2006

Its the javascript! I figured it out! now I just have to align the submenus and the main menus

Sign In

Modding Dreamweaver Template

Recommended Posts

me1000

Link to comment

Share on other sites

moberemk

Link to comment

Share on other sites

me1000

Link to comment

Share on other sites

Vorotaev

Link to comment

Share on other sites

me1000

Link to comment

Share on other sites

me1000

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information