0 Replies Latest reply on Mar 9, 2010 2:14 PM by completenewbie28356

    Menu bar code issue

    completenewbie28356 Level 1

      Hi everyone,

       

      Thanks for all your help with my last question - as a result I recoded my website in CSS! Hurrah!

       

      Anyway I've found a nice menu bar I'd like to incorporate into the website.

       

      Here is a sample of my code:

       

       

       

      </head>

       

      <body onload="MM_preloadImages('../assets/Pressed.jpg')">
      <div id="wrapper">
      <div id="sitemapnavigator">
        <p>Home | Shop | Sitemap | Contact Us  </p>
      </div>
      <div id="logowrapper"><a href="index.htm"><img src="images/CreativeHandsFoundationBanner.jpg" alt="Creative Hands Foundation Logo" width="800" height="137" border="0" /></a></div>
        <div id="navigation">
        Home buttons go here
        </div>
       
        <div id="headerImg"></div>
        <div id="bodyarea">
          <div id="leftcontent">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo hendrerit mi. Praesent libero lorem, sollicitudin bibendum, ultricies in, pharetra id, risus. Donec malesuada tristique felis. Etiam ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor sollicitudin tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur volutpat lacus quis pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
      </div>

       

      Where it says home buttons go here I would like the menu bar.

       

      Now I attach the CSS style sheet, have the images in the right folder.

       

      Then copy and paste the HTML code for the menubar into the Home buttons go here part:

       

       

       

       

       

      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Menu</title>
      <link href="menustyle.css" rel="stylesheet" type="text/css" />
      </head>

       

      <body>
      <div class="nav-container-outer">
         <img src="images/nav-bg-l.jpg" alt="" class="float-left" />
         <img src="images/nav-bg-r.jpg" alt="" class="float-right" />
         <ul id="nav-container" class="nav-container">
            <li><a class="item-primary" href="#">HOME</a>
               </li>
        
            <li><span class="divider divider-vert" ></span></li>
            <li><a class="item-primary" href="#">Products</a>
        
               <ul style="width:150px;">
               <li><a href="#">SoftwarePlus</a></li>
               <li><a href="#">MagicDriver</a></li>
               <li><a href="#">GreatFX</a></li>
               <li><a href="#">SampleSoft</a></li>
               <li><a href="#">UnDoIt</a></li>
               <li><a href="#">100% CSS Menu</a></li>
               <li><a href="#;">With Cross-Browser</a></li>
               <li><a href="#;">Dropdowns</a></li>
               <li><a href="#;">Absolutely NO Javascript</a></li>
               <li><a href="#;">Being Used On</a></li>
               <li><a href="#;">These Menus</a></li>
               <li><span class="divider divider-horiz" ></span></li>
               <li><a href="#;">Example Of a Divider</a></li>
               <li><a href="#;">With No Title</a></li>
               </ul></li>
        
            <li><span class="divider divider-vert" ></span></li>
            <li><a class="item-primary" href="#">Quality</a>
        
               <ul style="width:150px;">
               <li><a href="#">SoftwarePlus</a></li>
               <li><a href="#">MagicDriver</a></li>
               <li><a href="#">GreatFX</a></li>
               <li><a href="#">SampleSoft</a></li>
               <li><a href="#">UnDoIt</a></li>
               <li><a href="#">100% CSS Menu</a></li>
               <li><a href="#;">With Cross-Browser</a></li>
               <li><a href="#;">Dropdowns</a></li>
               <li><a href="#;">Absolutely NO Javascript</a></li>
               <li><a href="#;">Being Used On</a></li>
               <li><a href="#;">These Menus</a></li>
               <li><span class="divider divider-horiz" ></span></li>
               <li><a href="#;">Example Of a Divider</a></li>
               <li><a href="#;">With No Title</a></li>
               </ul></li>
        
            <li><span class="divider divider-vert" ></span></li>
            <li><a class="item-primary" href="#">Services</a>
        
               <ul style="width:150px;">
               <li><span class="item-secondary-title" >Title For Links</span></li>
               <li><a href="#">These Links Still Appear</a></li>
               <li><a href="#">Just Like The Others</a></li>
               <li><a href="#">Even When Under A Title</a></li>
               <li><span class="divider divider-horiz" ></span></li>
               <li><span class="item-secondary-title" >Title After Divider</span></li>
               <li><a href="#">Once Again...</a></li>
               <li><a href="#">These Links Still Appear</a></li>
               <li><a href="#">Just Like The Others</a></li>
               <li><a href="#">Even When Under A Title</a></li>
               </ul></li>
        
            <li><span class="divider divider-vert" ></span></li>
            <li><a class="item-primary" href="#;">Very Long Item</a>
        
               <ul style="width:150px;">
               <li><span class="item-secondary-title" >Title For Links</span></li>
               <li><a href="#">These Links Still Appear</a></li>
               <li><a href="#">Just Like The Others</a></li>
               <li><a href="#">Even When Under A Title</a></li>
               <li><span class="divider divider-horiz" ></span></li>
               <li><span class="item-secondary-title" >Title After Divider</span></li>
               <li><a href="#">Once Again...</a></li>
               <li><a href="#">These Links Still Appear</a></li>
               <li><a href="#">Just Like The Others</a></li>
               <li><a href="#">Even When Under A Title</a></li>
               </ul></li>
              
             <li><span class="divider divider-vert" ></span></li>
            <li><a class="item-primary" href="#;">Fully Flexible</a>
        
               <ul style="width:150px;">
               <li><span class="item-secondary-title" >Title For Links</span></li>
               <li><a href="#">These Links Still Appear</a></li>
               <li><a href="#">Just Like The Others</a></li>
               <li><a href="#">Even When Under A Title</a></li>
               <li><span class="divider divider-horiz" ></span></li>
               <li><span class="item-secondary-title" >Title After Divider</span></li>
               <li><a href="#">Once Again...</a></li>
               <li><a href="#">These Links Still Appear</a></li>
               <li><a href="#">Just Like The Others</a></li>
               <li><a href="#">Even When Under A Title</a></li>
               </ul></li>
         <li class="clear"> </li></ul>
      </div>
      </body>
      </html>

       

       

      Yes, I do change the extensions to what I believe are the correct extensions for the images. But I still get a menubar with correct end images, correct drop down (almost) but a white stretched rollover main section - not what I want.

       

      The CSS code is here (if that helps which it should):


      @charset "utf-8";
      /* CSS Document */

       

      body{
      padding: 25px;
      }

       

      /*^'^ Navigation Structure ^'^*/
      .nav-container-outer{
      background: #990000;
      padding: 0px;
      height: 74px;
      background: url(images/nav-bg.jpg);
      }
      .float-left{
      float: left;
      }
      .float-right{
      float: right;
      }
      .nav-container .divider{
      display:block;
      font-size:1px;
      border-width:0px;
      border-style:solid;
      }
      .nav-container .divider-vert{
      float:left;
      width:0px;
      display: none;
      }
      .nav-container .item-secondary-title{
      display:block;
      cursor:default;
      white-space:nowrap;
      }
      .clear{
      font-size:1px;
      height:0px;
      width:0px;
      clear:left;
      line-height:0px;
      display:block;
      float:none;
      }
      .nav-container{
      position:relative;
      zoom:1;
      margin: 0 auto;
      }
      .nav-container a, .nav-container li{
      float:left;
      display:block;
      white-space:nowrap;
      }
      .nav-container div a, .nav-container ul a, .nav-container ul li{
      float:none;
      }
      .nav-container ul{
      left:-10000px;
      position:absolute;
      }
      .nav-container, .nav-container ul{
      list-style:none;
      padding:0px;
      margin:0px;
      }
      .nav-container li a{
      float:none
      }
      .nav-container li{
      position:relative;
      }
      .nav-container ul{
      z-index:10;
      }
      .nav-container ul ul{
      z-index:20;
      }
      .nav-container ul ul ul{
      z-index:30;
      }
      .nav-container ul ul ul ul{
      z-index:40;
      }
      .nav-container ul ul ul ul ul{
      z-index:50;
      }
      li:hover>ul{
      left:auto;
      }
      #nav-container ul {
      top:100%;
      }
      #nav-container ul li:hover>ul{
      top:0px;
      left:100%;
      }

       

      /*^'^ Primary Items ^'^*/   
      #nav-container a{   
      padding:7px 17px 7px 18px;
      margin: 10px 0px 0px 0px;
      color: #FFFFFF;
      font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
      font-size:14px;
      text-decoration:none;
      font-weight: bold;
      background: url(images/item-primary-bg.gif);
      background-repeat: no-repeat;
      background-position: top;
      }

       

      #nav-container a:hover{
      color: #6C3600;
      background: url(images/item-primary-bg.gif);
      background-repeat: no-repeat;
      background-position: center;
      }

       

      /*^'^ Secondary Items Container ^'^*/   
      #nav-container div, #nav-container ul{   
      padding:10px 4px 10px 4px;
      margin:0px 0px 0px 0px;
      background: url(images/item-secondary-container-bg.jpg);
      background-repeat: repeat-x;
      background-color: #FF9900;
      border-bottom: 1px solid #CA6500;
      }

       

      /*^'^ Secondary Items ^'^*/   
      #nav-container div a, #nav-container ul a{   
      padding:3px 10px 3px 6px;
      background-color: #FFFFFF;
      background: url(images/item-secondary-bg.jpg);
      background-repeat: no-repeat;
      background-position: 0px 22px;
      font-size:11px;
      border-width:0px;
      border-style:none;
      margin: 0px 0px 0px 0px;
      width: 149px;
      }

       

      /*^'^ Secondary Items Hover State ^'^*/   
      #nav-container div a:hover, #nav-container ul a:hover{   
      background-color: #FFFFFF;
      background: url(images/item-secondary-bg.jpg);
      background-repeat: no-repeat;
      color:#CC0000;
      }

       

      /*^'^ Secondary Item Titles ^'^*/   
      #nav-container .item-secondary-title{   
      cursor:default;
      padding:4px 0px 3px 7px;
      color: #6C3600;
      font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
      font-size:11px;
      /* background: url(images/item-secondary-title-bg.jpg); */
      background-repeat: no-repeat;
      font-weight:bold;
      }

       

      /*^'^ Horizontal Dividers ^'^*/   
      #nav-container .divider-horiz{   
      border-top-width:1px;
      margin:5px 5px;
      border-color: #C16100;
      }

       

      /*^'^ Vertical Dividers ^'^*/   
      #nav-container .divider-vert{   
      border-left-width:1px;
      height:15px;
      margin:4px 2px 0px 2px;
      border-color:#AAAAAA;
      }

       

       

      And just by the by I have played around with the code lots, cutting bits, adding bits, changing etc. as I thought best for about 3 hours. But have not achieved the desired result (e.g. I've got rid of the div id for the div class, cleared the unnecessary reference to xhtml etc.)

       

       

      Any help is most appreciated.