Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sub navbar won't let me click on it

    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 :

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

    Any help would be much appreciated ! Thanks !
    Last edited by cosmicgirl; 01-03-2006 at 01:20 AM.

  • #2
    New Coder
    Join Date
    Dec 2005
    Location
    Soul city
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi CG,
    post ur code.

  • #3
    New Coder
    Join Date
    Dec 2005
    Location
    Soul city
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is the code of the original Dreamweaver page design:

    Code:
    <!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>
    Last edited by cosmicgirl; 01-04-2006 at 11:03 PM.

  • #6
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the code of my own page:

    Code:
    <!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>
    Last edited by cosmicgirl; 01-04-2006 at 11:04 PM.

  • #7
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here the CSS file of the original page:

    Code:
    /***********************************************/
    /* 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 **********************/
    Last edited by cosmicgirl; 01-04-2006 at 11:05 PM.

  • #8
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ... and here's the CSS of my own page:

    Code:
    /***********************************************/
    /* 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;
    }
    Last edited by cosmicgirl; 01-04-2006 at 11:06 PM.

  • #9
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Trouble started when I decided to insert my logo at the top of the page and to replace:

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

    Code:
    <div id="masthead"> 
    <a href="index.htm"><img src="pictures/csslayout/logo2desatutopred.jpg" width="497" height="82" border="0"></a>
    Thanks for any help !
    Last edited by cosmicgirl; 01-04-2006 at 11:07 PM.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Ugh, learn to use the VB CODE tags when posting code.

    Use this for your closesubnav function
    Code:
    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';
        }
      }
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about the ugly post, just fixed it.

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

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

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •