1 Reply Latest reply on Apr 30, 2010 1:22 AM by Mylenium

    Making Each Spry Menu or Items Within A Menu Completely Independent Of Each Other

    blakers81

      So,

       

      I am working on designing a website and I am trying to put a Spry drop down menu in it and make each menu and/or items within a menu (whichever I choose to do) completely independent of each other so that if I change the pixels or alignment of one menu/item, it will not change the pixels/alignment of all the menus/items.

       

      I have racked my head trying to figure out how to do it to no avail.  Can anyone look at the two sets of codes here and help me out:

       

       

      1.) The beginning of a website with a Spry Menu I currently made, but the words "Genres", "Movies Sorted By Date", and "Top 50 Movies" are NOT where I want them to be because anytime I change the pixel width or alignment on one menu, it does the same to ALL THREE menu items; I want to be able to manipulate each one separately:

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      <!--
      body {
          background-color: #1E233E;
      }
      .header {
          font-family: Amienne;
          font-size: 100px;
          text-align: center;
      }
      body,td,th {
          color: #F0F0F0;
          text-align: center;
          font-size: 12px;
      }
      .ctr {
          text-align: center;
      }
      -->
      </style>
      <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
      <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
      </head>

       

      <body>
      <div align="center">
        <table width="855" border="0" cellpadding="0">
          <tr>
            <td height="122" valign="bottom" class="header">The Best Movies Ever Made</td>
          </tr>
        </table>
        <table width="855" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="230" height="48" valign="top" style="font-size: 17px; text-align: right;"><div id="genres">
              <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#" class="MenuBarItemSubmenu">Genres</a>
        <ul>
          <li><a href="#">Action</a></li>
          <li><a href="#">Adventure</a></li>
          <li><a href="#">Classics</a></li>
      <li><a href="#">Comedy</a></li>
      <li><a href="#">Crime</a></li>
          <li><a href="#">Documentary</a></li>
          <li><a href="#">Drama</a></li>
          <li><a href="#">Family</a></li>
          <li><a href="#">Fantasy</a></li>
          <li><a href="#">Horror</a></li>
          <li><a href="#">Kids</a></li>
          <li><a href="#">Martial Arts</a></li>
      <li><a href="#">Medieval</a></li>
      <li><a href="#">Mystery</a></li>
      <li><a href="#">Romance</a></li>
      <li><a href="#">Sci-Fi</a></li>
      <li><a href="#">Sports</a></li>
      <li><a href="#">Suspense</a></li>
      <li><a href="#">War</a></li>
      <li><a href="#">Western</a></li>
        </ul>
      </li>
              </ul>
            </div></td>
            <td width="353" valign="top" style="font-size: 17px"><div id="dates">
              <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a href="#">Movies Sorted By Date</a></li>
              </ul>
            </div></td>
            <td width="272" valign="top" style="font-size: 17px; text-align: left;"><div id="top 50">
              <ul id="MenuBar3" class="MenuBarHorizontal">
      <li><a href="#">Top 50 Movies</a></li>
              </ul>
            </div></td>
          </tr>
        </table>
      </div>
      <p align="center"> </p>
      <script type="text/javascript">
      <!--
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      //-->
      </script>
      </body>
      </html>

       

       

       

       

       

       

       

       

       

       

       

       

       

      2.)  The menus how I would like them to look (if they were actually menus).  Right there, they are just plain type each in their own table exactly where I want the words to appear in relation to the homepage name (The Best Movies Ever Made) right above.

       

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      <!--
      body {
          background-color: #1E233E;
      }
      .header {
          font-family: Amienne;
          font-size: 100px;
          text-align: center;
      }
      body,td,th {
          color: #F0F0F0;
          text-align: center;
          font-size: 12px;
      }
      .ctr {
          text-align: center;
      }
      -->
      </style></head>

       

      <body>
      <div align="center">
        <table width="855" border="0" cellpadding="0">
          <tr>
            <td height="122" valign="bottom" class="header">The Best Movies Ever Made</td>
          </tr>
        </table>
        <table width="855" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="230" height="48" valign="top" style="font-size: 17px; text-align: right;">Genres</td>
            <td width="353" valign="top" style="font-size: 17px">Movies Sorted By Date</td>
            <td width="272" valign="top" style="font-size: 17px; text-align: left;">Top 50 Movies</td>
          </tr>
        </table>
      </div>
      <p align="center"> </p>
      </body>
      </html>

       

       

       

       

      Ok, there it is.  Any help with this would be greatly appreciated!!