13 Replies Latest reply on Mar 11, 2010 1:20 PM by hatesgames

    CS4 horizontal spry menu display

    hatesgames Level 1

      I am at wit's end with this thing! I even wiped everything off my webpage and just put the menu in. Lo and behold when I looked at the site in IE and Firefox, and it is still displaying horizontally. I got a good suggestion from Mr. Pleysier, but it didn't work. Please help.

       

      <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
      <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
          <ul>
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
          </ul>
        </li>
        <li><a href="#">Item 2</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
          <ul>
            <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
              <ul>
                <li><a href="#">Item 3.1.1</a></li>
                <li><a href="#">Item 3.1.2</a></li>
              </ul>
            </li>
            <li><a href="#">Item 3.2</a></li>
            <li><a href="#">Item 3.3</a></li>
          </ul>
        </li>
        <li><a href="#">Item 4</a></li>
      </ul>
      <script type="text/javascript">
      <!--
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
      //-->
      </script>

        • 1. Re: CS4 horizontal spry menu display
          John Waller Adobe Community Professional & MVP

          Can you provide a link to a page online so we can see the problem in action?

          • 3. Re: CS4 horizontal spry menu display
            John Waller Adobe Community Professional & MVP

            Have you uploaded the SpryAssets folder to the server?

             

            <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
            <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

            • 4. Re: CS4 horizontal spry menu display
              hatesgames Level 1

              Yes. I have my local & remote files synced.

              • 5. Re: CS4 horizontal spry menu display
                osgood_ Level 8

                hatesgames wrote:

                 

                Yes. I have my local & remote files synced.

                 

                Nope.

                 

                Both those files are NOT uploaded to the server where the link says they should be:

                 

                 

                http://pilatesplusmovementstudio.com../SpryAssets/SpryMenuBar.js

                 

                http://pilatesplusmovementstudio.com../SpryAssets/SpryMenuBarHorizontal.css

                • 6. Re: CS4 horizontal spry menu display
                  hatesgames Level 1

                  I am so sorry! They should be now.

                  • 7. Re: CS4 horizontal spry menu display
                    John Waller Adobe Community Professional & MVP

                    Doesn't look like it

                     

                    I cannot download http://pilatesplusmovementstudio.com/SpryAssets/SpryMenuBarHorizontal.css which is where I'd expect to find it.

                     

                    Also your paths to your files in your code look wrong.

                    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                     

                     

                    They have ../ in front of them which means go up a level. In the home page, this doesn't mean much because you cannot go up a level from the home page.

                    • 8. Re: CS4 horizontal spry menu display
                      hatesgames Level 1

                      I'm new at this and going trial and error. I apologize for not knowing how to get you guys what you need to see. I upload my files to a remote site called ipower. I will post my home page code and the spry codes.

                      • 9. Re: CS4 horizontal spry menu display
                        hatesgames Level 1

                        home page codes

                         

                        ///<!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>Welcome!</title>
                        <link href="../pilates_plus.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" />
                        <link href="history.css" rel="stylesheet" type="text/css" />
                        <link href="index.css" rel="stylesheet" type="text/css" />
                        </head>

                        <body>
                        <div id="container">
                        <div id="banner"><img src="images/image003.gif" width="969" height="80" alt="logo" /></div>
                              <ul id="pilates_menu" class="MenuBarHorizontal">
                              <li><a href="../index.html">Welcome!</a>      </li>
                              <li><a href="../history.html">History</a></li>
                              <li><a href="../programs.html">Programs</a></li>
                              <li><a href="../letus.html">Let Us Know</a></li>
                              <li><a href="../calendar.html">Calendar</a></li>
                              <li><a class="MenuBarItemSubmenu" href="../page1.html">Newsletter</a>
                                <ul>
                                  <li><a href="../page2.html">Page 2</a>          </li>
                        <li><a href="../page3.html">Page 3</a></li>
                                  <li><a href="../page4.html">Page 4</a></li>
                                </ul>
                              </li>
                            </ul>
                              <img src="images/image343.jpg" width="457" height="304" align="right" />
                            <div id="left_column">
                              <p>PilatesPlus Movement Studio is here to serve your needs and commitment as you journey to improved and continued wellness in body and mind. The health and safety of our clients is a priority, and our programs support this mission.</p>
                              <p>Our primary programs consist of Pilates Mat, Pilates Reformer, Jumpboard, Zumba, Ballet Barre, COREband and Flexband.<br />
                              These practices blend time effigiency with muscle strengthening, improved endurnace and ease of flexibility.</p>
                              <p>To complete your desire to enhance the benefits of a healthy exercise program, our program also provides opportunities for cardiovascular and respiratory fitness. Our goals challeneg you to grow in focus, stability, rotation, power and achieveing stress management.</p>
                              <p>In addition, the application of the highest level of thoughtful skill for each individual client is sought by our instructors to decrease pain and increase mobility and function.</p>
                              <p>To support continued improvement, our clients are educated to practice techniques, which will support independant health through workshops and individual programs built around the successes and challenges of our clients.<br />
                              </p>
                          </div>
                          <div id="column_container"></div>
                        </div>
                        <script type="text/javascript">
                        <!--
                        var MenuBar1 = new Spry.Widget.MenuBar("pilates_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
                        //-->
                        </script>
                        </body>
                        </html>///

                        • 10. Re: CS4 horizontal spry menu display
                          hatesgames Level 1

                          ///@charset "UTF-8";

                          /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

                          /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

                          /*******************************************************************************

                          LAYOUT INFORMATION: describes box model, positioning, z-order

                          *******************************************************************************/

                          /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
                          ul.MenuBarHorizontal
                          {
                          margin: 10;
                          padding: 10;
                          list-style-type: none;
                          font-size: 100%;
                          cursor: default;
                          width: 968px;
                          height: auto;
                          }
                          /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
                          ul.MenuBarActive
                          {
                          z-index: 1000;
                          }
                          /* Menu item containers, position children relative to this container and are a fixed width */
                          ul.MenuBarHorizontal li
                          {
                          margin: 0;
                          padding: 0;
                          list-style-type: none;
                          font-size: 100%;
                          position: relative;
                          text-align: left;
                          cursor: pointer;
                          width: 8em;
                          float: left;
                          }
                          /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
                          ul.MenuBarHorizontal ul
                          {
                          margin: 0;
                          padding: 0;
                          list-style-type: none;
                          font-size: 100%;
                          z-index: 1020;
                          cursor: default;
                          width: 8.2em;
                          position: absolute;
                          left: -1000em;
                          }
                          /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
                          ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
                          {
                          left: auto;
                          }
                          /* Menu item containers are same fixed width as parent */
                          ul.MenuBarHorizontal ul li
                          {
                          width: 8.2em;
                          }
                          /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
                          ul.MenuBarHorizontal ul ul
                          {
                          position: absolute;
                          margin: -5% 0 0 95%;
                          }
                          /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
                          ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
                          {
                          left: auto;
                          top: 0;
                          }

                          /*******************************************************************************

                          DESIGN INFORMATION: describes color scheme, borders, fonts

                          *******************************************************************************/

                          /* Submenu containers have borders on all sides */
                          ul.MenuBarHorizontal ul
                          {
                          border: 1px solid #CCC;
                          }
                          /* Menu items are a light gray block with padding and no text decoration */
                          ul.MenuBarHorizontal a
                          {
                          display: block;
                          cursor: pointer;
                          background-color: #EEE;
                          padding: 0.5em 0.75em;
                          color: #333;
                          text-decoration: none;
                          }
                          /* Menu items that have mouse over or focus have a blue background and white text */
                          ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
                          {
                          background-color: #33C;
                          color: #FFF;
                          }
                          /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
                          ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
                          {
                          background-color: #33C;
                          color: #FFF;
                          }

                          /*******************************************************************************

                          SUBMENU INDICATION: styles if there is a submenu under a given menu item

                          *******************************************************************************/

                          /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
                          ul.MenuBarHorizontal a.MenuBarItemSubmenu
                          {
                          background-image: url(SpryMenuBarDown.gif);
                          background-repeat: no-repeat;
                          background-position: 95% 50%;
                          }
                          /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
                          ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
                          {
                          background-image: url(SpryMenuBarRight.gif);
                          background-repeat: no-repeat;
                          background-position: 95% 50%;
                          }
                          /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
                          ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
                          {
                          background-image: url(SpryMenuBarDownHover.gif);
                          background-repeat: no-repeat;
                          background-position: 95% 50%;
                          }
                          /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
                          ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
                          {
                          background-image: url(SpryMenuBarRightHover.gif);
                          background-repeat: no-repeat;
                          background-position: 95% 50%;
                          }

                          /*******************************************************************************

                          BROWSER HACKS: the hacks below should not be changed unless you are an expert

                          *******************************************************************************/

                          /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
                          ul.MenuBarHorizontal iframe
                          {
                          position: absolute;
                          z-index: 1010;
                          filter:alpha(opacity:0.1);
                          }
                          /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
                          @media screen, projection
                          {
                          ul.MenuBarHorizontal li.MenuBarItemIE
                          {
                            display: inline;
                            f\loat: left;
                            background: #FFF;
                          }
                          }///

                          • 11. Re: CS4 horizontal spry menu display
                            hatesgames Level 1

                            I was going to put up the SpryMenuBar.js, but it's blank.

                            • 12. Re: CS4 horizontal spry menu display
                              osgood_ Level 8

                              For now why don't you save yourself a lot of agro and insert the css for the menu bar directy into the page?

                               

                              Copy the css from your SpryMenuBarHorizontal.css file

                              paste it between some css style type tags (see below)

                              <style type="text/css">

                              Paste css code here

                              </style>


                              Make sure it is inserted directly before your closing
                              </head> tag near the top of the page about 10 lines down.


                              At least you'll see something positive. (hopefully)


                              Then you can work out the correct link to the .js script because obviously at he moment nothing seems to be
                              linked up correctly or you have not uploaded the files to the right location, if at all and now you say
                              your.js file is blank
                              • 13. Re: CS4 horizontal spry menu display
                                hatesgames Level 1

                                Thank you. I will try that. As I said, I'm figuring this out as I go along. I appreciate

                                any and all help.