3 Replies Latest reply on Mar 28, 2010 5:12 PM by Bruce_B

    Menus on different pages share formatting

    Bruce_B

      Somehow the spry menu from my  homepage and another from a secondary  page got linked (for lack of a  better word) together.  Now when I change  the formatting of one, the  other one changes too.  It was not  originally like this to my  knowledge... but if it was and I just didn't  realize it, i would still  like to know how to make them independent of  each other's formatting.  Please note that neither menu is positioned properly now (in the code), I just want to break them apart so that I can position them properly.

       

      I know that  spry menus on the same page will  share formatting, because the are in  the same class, but I didn't think  this rule applied across multiple  pages.

       

      My  site is not on the server yet, so  I'll have to include the code here.   If you need to see my spry assets,  just let me know.

       

      Here is the main index code:

      <!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>BruceBever.com  Main</title>
      <style type="text/css">
      <!--
      body {
           font: 100% Verdana, Arial, Helvetica, sans-serif;
          background:  #ffffff;
          margin: 0; /* it's good practice to zero the margin and  padding of the body element to account for differing browser defaults */
           padding: 0;
          text-align: center; /* this centers the container in  IE 5* browsers. The text is then set to the left aligned default in the  #container selector */
          color: #000000;
      }
      .oneColLiqCtr  #container {
          width: 100%;  /* this will create a container 80% of  the browser width */
          background: #FFFFFF;
          margin: 0 auto;  /* the auto margins (in conjunction with a width) center the page */
           border: 1px solid #000000;
          text-align: center; /* this overrides  the text-align: center on the body element. */
      }
      .oneColLiqCtr  #mainContent {
          padding: 0 20px; /* remember that padding is the  space inside the div box and margin is the space outside the div box */
      }
      -->
      </style>
      <link  href="Website.css" rel="stylesheet" type="text/css" />
      <script  src="SpryAssets/SpryMenuBar.js"  type="text/javascript"></script>
      <link  href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet"  type="text/css" />
      </head>

       

      <body class="oneColLiqCtr">

       

      <div  id="container">
        <div id="mainContent">
        <div  id="mainpage_image"></div>
        <div id="menubar_box">  </div>
        <ul id="MenuBarMainIndex"  class="MenuBarHorizontal">
          <li><a href="#">Item  1</a>      </li>
          <li><a href="#">Item  2</a></li>
          <li><a href="#">Item  3</a>      </li>
          <li><a href="#">Item  4</a></li>
        </ul>
      <h1> Main Content  </h1>
          <p>Lorem ipsum dolor sit amet</p>
          <h2>H2 level heading  </h2>
          <p>Lorem ipsum</p>
         <!-- end #mainContent --></div>
      <!-- end #container  --></div>
      <script type="text/javascript">
      <!--
      var  MenuBarMainIndex = new Spry.Widget.MenuBar("MenuBarMainIndex",  {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",  imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      //-->
      </script>
      </body>
      </html>

       

      Here is the secondary page's code:

      <!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>Bruce  Bever Photography- Editorial Home</title>
      <link  href="EditorialHmPg.css" rel="stylesheet" type="text/css" />
      <!--

       

      -->
      </style>
      <script  src="SpryAssets/SpryMenuBar.js"  type="text/javascript"></script>
      <script  type="text/javascript">
      <!--
      function MM_swapImgRestore() {  //v3.0
        var i,x,a=document.MM_sr;  for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)  x.src=x.oSrc;
      }
      function MM_preloadImages() { //v3.0
        var  d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
          var  i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;  i++)
          if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;  d.MM_p[j++].src=a[i];}}
      }

       

      function MM_findObj(n, d) { //v4.01
        var  p,i,x;  if(!d) d=document;  if((p=n.indexOf("?"))>0&&parent.frames.length) {
           d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
         if(!(x=d[n])&&d.all) x=d.all[n]; for  (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
         for(i=0;!x&&d.layers&&i<d.layers.length;i++)  x=MM_findObj(n,d.layers[i].document);
        if(!x &&  d.getElementById) x=d.getElementById(n); return x;
      }

       

      function  MM_swapImage() { //v3.0
        var i,j=0,x,a=MM_swapImage.arguments;  document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
         if  ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)  x.oSrc=x.src; x.src=a[i+2];}
      }
      //-->
      </script>
      <style  type="text/css"></style>
      <link  href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet"  type="text/css" />
      </head>

       

      <body  onload="MM_preloadImages('Images/_60N6851Small.jpg','Images/_60N7155small.jpg',   'Images/RodeoSmall-2.jpg','Images/JessicaSmall.jpg','Images/PeopleSmall.jpg')">
      <div  id="MasterContainer">
        <div id="Container">
          <div  id="Photos"><a href="LR Galleries/Rodeo/RodeoIndex.html"  onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('EdHmPhoto1','','Images/RodeoSmall-2.jpg',1)"><img  src="LR Galleries/Rodeo/album1/images/CharlotteRodeo145_Edit.jpg"  name="EdHmPhoto1" width="720" height="502" border="0" id="EdHmPhoto1"  /></a><a href="MainIndex.html"  onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('EdHmPhoto2','','Images/JessicaSmall.jpg',1)"><img  src="Images/DSC_0158.-Edit-1.jpg" name="EdHmPhoto2" width="262"  height="195" border="0" id="EdHmPhoto2" /></a></div>
           <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a  href="#">dance</a></li>
      </ul>
        </div>
         <div id="LowerContainer">
      <div id="LowerPhotos"><a  href="LR Galleries/Peru/PeruIndex.html" onmouseout="MM_swapImgRestore()"   onmouseover="MM_swapImage('EdHmPhoto3','','Images/_60N6851Small.jpg',1)"><img  src="LR Galleries/Peru/album1/images/18.jpg" name="EdHmPhoto3"  width="502" height="720" border="0" id="EdHmPhoto3" /></a><a  href="#" onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('EdHmPhoto4','','Images/_60N7155small.jpg',1)"><img  src="LR Galleries/Arlington/album1/images/_60N7129OldSchl.jpg"  name="EdHmPhoto4" width="502" height="720" border="0" id="EdHmPhoto4"  /></a><a href="LR Galleries/People/PeopleIndex.html"  onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('EdHmPhoto5','','Images/PeopleSmall.jpg',1)"><img  src="LR Galleries/People/album1/images/_05_1.jpg" name="EdHmPhoto5"  width="502" height="720" border="0" id="EdHmPhoto5" /></a>  </div>
      </div>

       

      </div>
      <script  type="text/javascript">
      <!--

       

      var MenuBar2 = new  Spry.Widget.MenuBar("MenuBar2",  {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",  imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      //-->
      </script>
      </body>
      </html>

        • 1. Re: Menus on different pages share formatting
          Ben M Adobe Community Professional

          The Spry Menu Bars will use the SpryMenuBar*.css document (replace * with vertical or horizontal).  Dreamweaver will not allow you to create 2 differently styled menus out of the box.  However, if you wish to use 2 styles, you can make a copy of the SpryMenuBar*.css file and then for the page with the other menu include that one.  Now keep in mind if both menus appear on the same page you will need to go through the SpryMenuBar HTML and CSS because the names and IDs are the same (ie: MenuBarHorizontal), but you can get around that by adding a "1" to every name for the second menu in the HTML and CSS.

          1 person found this helpful
          • 2. Re: Menus on different pages share formatting
            Bruce_B Level 1

            Maybe I misspoke.  I don't necessarily want the formatting within each menu to be different, in fact all the aesthetic elements should be the same.  What I want to do is locate the menus in a different place on each of the two pages, and I can't.  Whenever I move the menu on one page, it moves on the other page too (of course, following the rules of css and html, they end up in completely wacky locations).  If I fix one, the other is out in left field.

             

            Before I started screwing around with things (trying to make two different horizontal menus on the same page, but that's another story), the menus were happily located where I told them to be.  In fact there were 3 of them, all behaving well.  All in different places, yet the text size, color, padding, etc. were all the same, which is great.  Now I can't figure out what I did, and bc of the nature of DW and the frequent saves, I can't go back to where things were working.

             

            (I just re-read my message and if it sounds a little short... I don't mean it to be.  I'm just banging my head over here and well beyond frustrated.)

             

            thanks

            Bruce

            • 3. Re: Menus on different pages share formatting
              Bruce_B Level 1

              OK so this is what I did:

               

              At some point when I copied the menu.css, the icon next to it changed from the standard DW icon (a little box with </> inside it) to a box with some sort of blue 'S' inside it.  I finally got so frustrated I just threw out anything related to a horizontal menu from my related files.

               

              When I started over, the menus are now moving indepently of each other as they USED to be doing.

               

              So my new question is this... what happened to my menu.css file that made that blue 'S' icon appear, and what does that icon indicate in the first place?