35 Replies Latest reply: Jul 19, 2012 6:03 PM by dixey-rose RSS

    How to fix my horizontal spry menu...

    Dano4193 Community Member

      Hi all, and so sorry to have to post again as my first post has never had any responses except the initial ones. I want to do all the work myself but just need some coaching on what might be wrong..my site is wwwDOTselfdefenseproshopDOTcom.


      Again any help or coaching is greatly appreciated...thank you..Dan

        • 1. Re: How to fix my horizontal spry menu...
          Ben Pleysier CommunityMVP

          The SpryMenuBar is contained within a div called sidebar1. The width of the sidebar has been set to 150px as in

           

          .thrColFixHdr #sidebar1 {

             float: left;

             width: 150px;

             background-color: #ebebeb;

             background-image: none;

             background-repeat: repeat;

             background-attachment: scroll;

             background-position: 0% 0%;

             background-clip: border-box;

             background-origin: padding-box;

             background-size: auto auto;

             padding-top: 15px;

             padding-right: 15px;

             padding-bottom: 15px;

             padding-left: 15px;

          }

          Simply place the menubar outside of the sidebar.

           

          Gramps

          • 2. Re: How to fix my horizontal spry menu...
            Dano4193 Community Member

            Hi, I located the menubar code like you said that was contained within the div called sidebar1, however sidebar1 is setup as a Repeat area so it shows on all web pages within the site. So when I placed the menubar outside of the sidebar1 code it worked but it then shifted the middle colum and right right sidebar2 content downward...so I did an undo.

             

            Here is the code below that shows the repeat

             

            <!-- TemplateBeginRepeat name="Left Navigation" -->

              <div id="sidebar1">

                <ul id="MenuBar1" class="MenuBarVertical">

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

                <h1 align="center"><br />

                </h1>

            <h1 align="left"> </h1>

                <ul>

                  <div align="center"></div>

                </ul>

                <h1 align="left"> </h1>

                <p><br />

                  <br />

                </p>

              </div>

              <!-- TemplateEndRepeat -->

            • 3. Re: How to fix my horizontal spry menu...
              Nancy O. CommunityMVP

              Start by validating your code and fix the signficant errors in your menu code. 

              http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.selfdefenseproshop.com%2F

               

              Code is very confused towards the bottom of Sidebar1 and you're missing a closing </li> tag. 

              <h1>, <p>, <div> and <br> tags don't belong in your list menus.  So you can delete them in Code View.

               

              </ul>

                  <h1 align="center"><br />

                  </h1>

              <h1 align="left"> </h1>

                  <ul>

                    <div align="center"></div>

                  </ul>

                  <h1 align="left"> </h1>

                  <p><br />

                    <br />

                  </p>

                </div>

               

               

               

              Nancy O.

              • 4. Re: How to fix my horizontal spry menu...
                Dano4193 Community Member

                Thank you for trying to help me. Trying to correct those errors are way out of my leage though. I might just go back to my original

                design in this case withougt using that spry menu. I just don't have the time to quickly become an expert at reading that kind

                of code. Thank you.

                • 5. Re: How to fix my horizontal spry menu...
                  Nancy O. CommunityMVP

                  If you're on the web forum you'll see I used a strikethrough on the code you can delete.  Does that not help you?

                   

                   

                  Nancy O.

                  • 6. Re: How to fix my horizontal spry menu...
                    Dano4193 Community Member

                    Hi Nancy,

                     

                    Yes that did help me, but after I deleted those ones that you did a strikeout on I still checked and it still showed I had 16 errors to fix.

                     

                    I think I might have messed up some code when I started playing around with my original site.

                     

                    Would you be able to help me again after I restore my site? maybe that will get rid of some of those errors I am praying.  I am willing to do all the work, I am just not that much of an expert

                    yet with some of this.

                     

                    Kind regards,
                    Dan

                    • 7. Re: How to fix my horizontal spry menu...
                      Nancy O. CommunityMVP

                      A lot of those validation errors are citing MM scripts and missing alt attributes on images.  Don't worry about them. 

                       

                       

                       

                       

                       

                      Nancy O.

                      • 8. Re: How to fix my horizontal spry menu...
                        Dano4193 Community Member

                        Hi Nancy,

                         

                        Ok I got rid of my old code on the server and put it back to the original code before I tried inserting the Spry Menu.

                         

                        I see though that I still have the 16 errors:(

                         

                        I am looking at the ones that are non alt ones.

                         

                        So the first one is line 99, having to do with the 'Home' button, I can see that. And my only guess is that it might need to be in CSS instead?

                         

                        I'm really sorry I am a rookie at some of this, but am willing to try if you can coach me along.

                        • 9. Re: How to fix my horizontal spry menu...
                          Nancy O. CommunityMVP

                          Open your Template.dwt file.  Bad code in red, code changes in green.

                           

                          On line 183 - 186 you have duplicate <h1> tags.  Remove them.

                           

                          <h1 align="left">

                          <h1 align="left"><a href="http://selfdefenseproshop.com/products.php?cat=53">Safety Kits</a> <br />

                          </h1>

                              </h1>

                           

                          On line 198 - 200, you have some more duplicate <h1> tags.  Remove them.

                           

                          <h1 align="left">

                                <h1 align="left"><a href="http://selfdefenseproshop.com/products.php?cat=54">Diversion Safes</a></h1>

                              </h1>

                           

                          On line 215, you have a duplicate <form> tag.  Remove it.

                           

                          <form method="post" action="mail.php">

                           

                          Line 217, you have this:

                           

                          <p><FONT style="BACKGROUND-COLOR: yellow">10 free informative reports on personal safety for women. Fill out your first name and email address and hit submit</FONT>. </p>

                           

                          Which should be expressed like this:

                           

                          <p style="background-color: #FF6">10 free informative reports on personal safety for women. Fill out your first name and email address and hit submit.</p>

                           

                          Don't worry about the MMcode for your rollovers.

                           

                          Nancy O.

                           

                           


                          • 10. Re: How to fix my horizontal spry menu...
                            Dano4193 Community Member

                            Hi Nancy, thank you for helping me. I removed the extra tags per your previous. I also managed to get the

                            error count now down to 8 and was able to fix a couple on my own:). I am stuck again though, not sure about the Alt not Specified ones and how to fix them...

                            • 11. Re: How to fix my horizontal spry menu...
                              Ben Pleysier CommunityMVP

                              The ALT attribute is required as you can see here http://www.w3schools.com/tags/tag_img.asp. If you have a look at the images used in the menu bar, you will see that you have used the ALT attribute albeit that they are empty.

                               

                              Gramps

                              • 12. Re: How to fix my horizontal spry menu...
                                Dano4193 Community Member

                                Thanks Gramps. I was able to fix those and now understand about the Alt and fixed those.

                                 

                                This is for Nancy. Hi Nancy, I was able to eliminate all the errors and am down now to just the last 3 which I think are

                                the MMcode ones you mentioned.

                                 

                                Now I think I am back to where I originally wanted, which was to remove the existing links in "Sidebar1" and insert a Horizontal Spry Menu which is where I ran into trouble. I can insert it but it will not open Horizontally.

                                 

                                When you have time can you help me with that? thanks so very much I really am appreciating your help.

                                • 13. Re: How to fix my horizontal spry menu...
                                  Ben Pleysier CommunityMVP

                                  Just pretend that I am Nancy, hard to do since we are the complete opposites, she's knowledgable and nice.

                                   

                                  1. Place your cursor at the end of line #108 (</div>) and press enter. This will create a blank line #109

                                  2. Insert a SpryMenuBar horizontal.

                                   

                                  That's it!

                                   

                                  Gramps

                                  • 14. Re: How to fix my horizontal spry menu...
                                    Dano4193 Community Member

                                    lol, thanks. Actually I meant to say I wanted to insert a Vertical menu bar. This is where I was at the beginning. When I do per your instructions and insert the Menu on line 109, it messes the page up. All the columns get pushed downward but the menu works ok. But if I insert it within the Left Column Repeat Region the columns are not affected and it looks ok but the menu will not work vertically.

                                     

                                    Inserted on line 109 but the other columns are pushed down

                                    DW_Spry Menu.jpg

                                    Inserted at the top of the Repeat Region - columns are now ok but the menu

                                    bar will not work vertically, it only opens Horizontally.

                                    Spry within Region.jpg

                                    • 15. Re: How to fix my horizontal spry menu...
                                      Ben Pleysier CommunityMVP

                                      Funny, this is what you had originally, except that you inserted a horizontal menubar instead of a vertical menubar..

                                       

                                      Forget what I said in my last reply and go to line #111 (just under <div id="sidebar1">) and insert a SpryMenuBar vertical.

                                       

                                      Gramps

                                      • 16. Re: How to fix my horizontal spry menu...
                                        Dano4193 Community Member

                                        Yes exactly. So here is what now happens after I insert it on line #111 which is where I want it but its now within the sidebar1 which is in a defined RepeatRegion. It is placed correctly but when you hover over the item you can see that it will not branch out vertically it goes downward instead.

                                         

                                        Here is a picture.

                                         

                                        within Repeat Region.jpg

                                        • 17. Re: How to fix my horizontal spry menu...
                                          Ben Pleysier CommunityMVP

                                          Please update the online page so that I can have a look.

                                           

                                          Gramps

                                          • 18. Re: How to fix my horizontal spry menu...
                                            Dano4193 Community Member

                                            Ok I just uploaded it online. as you can see, it is fine except that the sub menus do not go out vertically, only downward - horzontally.

                                            • 19. Re: How to fix my horizontal spry menu...
                                              Ben Pleysier CommunityMVP

                                              The first few lines of Columns.css look like

                                              @charset "utf-8";

                                              /* CSS Document */

                                              #sidebar1 h1 {

                                              font-size: 95%;

                                              font-weight: bold;

                                              }

                                              #sidebar1 ul {

                                              list-style-type: none;

                                              margin: 0px;

                                              padding: 0px;

                                              font-size: 85%;

                                              }

                                              Remove the highlighted.

                                               

                                              Gramps

                                              • 20. Re: How to fix my horizontal spry menu...
                                                Dano4193 Community Member

                                                Ok just removed those 2 lines in red but still did not make a difference, sub menus still go downward... I uploaded the latest code online ...

                                                 

                                                current.jpg

                                                • 21. Re: How to fix my horizontal spry menu...
                                                  Ben Pleysier CommunityMVP

                                                  Lines 99 to 103 of Columns.css shows

                                                  .thrColFixHdr #container #sidebar1 ul {

                                                      list-style-type: none;

                                                      margin: 0px;

                                                      padding: 0px;

                                                  }

                                                  which I did not see before, my apologies.

                                                   

                                                  Just remove all of those lines.

                                                   

                                                  Gramps

                                                  • 22. Re: How to fix my horizontal spry menu...
                                                    Dano4193 Community Member

                                                    Whohoo that did it! thank you so much Gramps!!

                                                     

                                                    One last couple things if you don't me bugging you. 1-how can I center

                                                    the menu like I have circled in red in my mocked up  picture below and 2-can I color

                                                    up the text at all on a Spry menu like this? I tried but it didn't seem to take...

                                                     

                                                     

                                                     

                                                     

                                                    current.jpg

                                                    • 23. Re: How to fix my horizontal spry menu...
                                                      Ben Pleysier CommunityMVP

                                                      1-how can I center the menu like I have circled in red in my mocked up  picture below

                                                      In SpryMenuBarVertical.css, change the value of line 16 to auto as in

                                                      ul.MenuBarVertical

                                                      {

                                                          margin: auto;

                                                          padding: 0;

                                                          list-style-type: none;

                                                          font-size: 100%;

                                                          cursor: default;

                                                          width: 8em;

                                                      }

                                                      2-can I color up the text at all on a Spry menu like this? I tried but it didn't seem to take.

                                                      In the same CSS file, starting at line 81, change the highlighted values

                                                      /* Menu items are a light gray block with padding and no text decoration */

                                                      ul.MenuBarVertical 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.MenuBarVertical a:hover, ul.MenuBarVertical 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.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible

                                                      {

                                                          background-color: #33C;

                                                          color: #FFF;

                                                      }

                                                       

                                                      Gramps

                                                      • 24. Re: How to fix my horizontal spry menu...
                                                        Dano4193 Community Member

                                                        Gramps....awesome, thank you, this is working great. Finally I think...this would be my last type of question. Can I widen the

                                                        menu at all? or is it pretty much set?

                                                        • 25. Re: How to fix my horizontal spry menu...
                                                          Ben Pleysier CommunityMVP

                                                          The CSS has been heavily commented to help with these issues. Have a look at the followiing

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

                                                           

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

                                                           

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

                                                           

                                                          /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */

                                                          ul.MenuBarVertical

                                                          {

                                                              margin: 0;

                                                              padding: 0;

                                                              list-style-type: none;

                                                              font-size: 100%;

                                                              cursor: default;

                                                              width: 8em;

                                                          }

                                                          /* 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 same fixed width as parent */

                                                          ul.MenuBarVertical li

                                                          {

                                                              margin: 0;

                                                              padding: 0;

                                                              list-style-type: none;

                                                              font-size: 100%;

                                                              position: relative;

                                                              text-align: left;

                                                              cursor: pointer;

                                                              width: 8em;

                                                          }

                                                          /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

                                                          ul.MenuBarVertical ul

                                                          {

                                                              margin: -5% 0 0 95%;

                                                              padding: 0;

                                                              list-style-type: none;

                                                              font-size: 100%;

                                                              position: absolute;

                                                              z-index: 1020;

                                                              cursor: default;

                                                              width: 8.2em;

                                                              left: -1000em;

                                                              top: 0;

                                                          }

                                                          /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

                                                          ul.MenuBarVertical ul.MenuBarSubmenuVisible

                                                          {

                                                              left: 0;

                                                          }

                                                          /* Menu item containers are same fixed width as parent */

                                                          ul.MenuBarVertical ul li

                                                          {

                                                              width: 8.2em;

                                                          }

                                                          The reason why the main menu items have a 0.2em width difference is because of the borders in the sub menu items.

                                                           

                                                          Gramps

                                                          • 26. Re: How to fix my horizontal spry menu...
                                                            Dano4193 Community Member

                                                            Actually I will look into that later. I have a worse problem I just discovered the menu is not working in Internet Explorer.....I have been testing it in FF all this time...is there anything that we can do about that?

                                                            • 27. Re: How to fix my horizontal spry menu...
                                                              Scott - Columbus, OH Community Member

                                                              Are you having the problem as I am?  While using IE8, click on the Boys Results button and rapidly move up and down with your cursor.

                                                               

                                                              http://gerberanalytics.com/tennis/tennis_header_test.php

                                                               

                                                              I called this error into Adobe Support today. They were not aware of it and they have not gotten back to me.

                                                               

                                                              I'll contact them tomorrow to see if they have made any progress.

                                                               

                                                              Scott

                                                              • 28. Re: How to fix my horizontal spry menu...
                                                                Dano4193 Community Member

                                                                Actually yours works fine on my mine. However mine is not working at all on IE. I just tested it in all the IE browser versions and it does not work.

                                                                 

                                                                Any solutions anyone? or is this a problem I will have with IE? thanks for any help.

                                                                • 29. Re: How to fix my horizontal spry menu...
                                                                  Ben Pleysier CommunityMVP

                                                                  Have a look here and, after fixing the problems, start a new topic stating the remaining problem(s).

                                                                   

                                                                  Gramps

                                                                  • 30. Re: How to fix my horizontal spry menu...
                                                                    Ben Pleysier CommunityMVP

                                                                    You are not using the latest Spry files

                                                                    The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.

                                                                     

                                                                    Gramps

                                                                    • 31. Re: How to fix my horizontal spry menu...
                                                                      dixey-rose Community Member

                                                                      Hi Altruistic.  I posted a question yesterday about why my drop-down menu won't work.  Is there any chance you would have time to help me out?  I'd really appreciate any help you can offer.  I'm using Dreamweaver CS5.5 on a Windows (Vista) computer, and the web site is; http://www.cglcontracting.com/index.html.  Thanks very much in advance for any help.

                                                                      • 32. Re: How to fix my horizontal spry menu...
                                                                        Ben Pleysier CommunityMVP

                                                                        I will reply to your original post in the morning (Aussi time). Very complicated with the changes that you have made to SpryMenuBarHorizontal.css

                                                                         

                                                                        Loved BC, my favourite after Down Under.

                                                                         

                                                                        Gramps

                                                                        • 33. Re: How to fix my horizontal spry menu...
                                                                          Dano4193 Community Member

                                                                          Will do thanks.

                                                                          • 34. Re: How to fix my horizontal spry menu...
                                                                            Dano4193 Community Member

                                                                            Sorry Im getting confused as to whom is talking to whom now with this other person in on this conversation....LOL sorry...

                                                                             

                                                                            I did the update

                                                                            Spry Prerelease 1.6.1

                                                                             

                                                                            Now when I try to do a preview in IE from DW I get this message in the screenshot. Otherwise after I uploaded again and try it in IE the menu still is not working...:(

                                                                             

                                                                             

                                                                            spryupdateIEmessage.jpg

                                                                            • 35. Re: How to fix my horizontal spry menu...
                                                                              dixey-rose Community Member

                                                                              Hi Gramps,

                                                                               

                                                                              Thanks very much for your offer to help.  Nice to hear that you've been in BC - where did you visit?  I've not been to Australia, but would like to visit some day.