Jump to content


Photo

Modding Dreamweaver Template


  • Please log in to reply
5 replies to this topic

#1 me1000

me1000
  • Members
  • PipPipPip
  • Advanced Member
  • 183 posts

Posted 09 April 2006 - 03:17 AM

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

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

and this is the code for the stylesheet

/************* 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;
}

Thanks,

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 09 April 2006 - 12:20 PM

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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 me1000

me1000
  • Members
  • PipPipPip
  • Advanced Member
  • 183 posts

Posted 09 April 2006 - 03:33 PM

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

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

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


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

#4 Vorotaev

Vorotaev
  • Members
  • PipPip
  • Member
  • 27 posts
  • LocationCanada

Posted 09 April 2006 - 04:23 PM

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


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.

#5 me1000

me1000
  • Members
  • PipPipPip
  • Advanced Member
  • 183 posts

Posted 09 April 2006 - 11:28 PM

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

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


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

#6 me1000

me1000
  • Members
  • PipPipPip
  • Advanced Member
  • 183 posts

Posted 09 April 2006 - 11:59 PM

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





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users