Adobe Community: How to fix my horizontal spry menu...

Dano4193 Calculating status...

Currently Being Moderated

How to fix my horizontal spry menu...

Jul 11, 2012 7:44 PM

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

3652 Views 35 Replies Latest reply: dixey-rose, Jul 19, 2012 6:03 PM

Replies

Currently Being Moderated

1. Ben Pleysier,

Jul 11, 2012 10:06 PM in reply to Dano4193

Report

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

|
Mark as:
Currently Being Moderated

2. Dano4193,

Jul 14, 2012 9:49 AM in reply to Ben Pleysier

Report

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


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


|
Mark as:
Currently Being Moderated

3. Nancy O.,

Jul 14, 2012 3:00 PM in reply to Dano4193

Report

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.selfdefen seproshop.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.

|
Mark as:
Currently Being Moderated

4. Dano4193,

Jul 14, 2012 3:22 PM in reply to Nancy O.

Report

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.

|
Mark as:
Currently Being Moderated

5. Nancy O.,

Jul 14, 2012 3:28 PM in reply to Dano4193

Report

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.

|
Mark as:
Currently Being Moderated

6. Dano4193,

Jul 14, 2012 3:53 PM in reply to Nancy O.

Report

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

|
Mark as:
Currently Being Moderated

7. Nancy O.,

Jul 14, 2012 4:01 PM in reply to Dano4193

Report

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

Nancy O.

|
Mark as:
Currently Being Moderated

8. Dano4193,

Jul 14, 2012 5:31 PM in reply to Nancy O.

Report

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.

|
Mark as:
Currently Being Moderated

9. Nancy O.,

Jul 15, 2012 11:50 AM in reply to Dano4193

Report

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.

|
Mark as:
Currently Being Moderated

10. Dano4193,

Jul 15, 2012 4:45 PM in reply to Nancy O.

Report

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

|
Mark as:
Currently Being Moderated

11. Ben Pleysier,

Jul 15, 2012 5:08 PM in reply to Dano4193

Report

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

|
Mark as:
Currently Being Moderated

12. Dano4193,

Jul 15, 2012 5:44 PM in reply to Dano4193

Report

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.

|
Mark as:
Currently Being Moderated

13. Ben Pleysier,

Jul 15, 2012 5:47 PM in reply to Dano4193

Report

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

|
Mark as:
Currently Being Moderated

14. Dano4193,

Jul 15, 2012 6:19 PM in reply to Ben Pleysier

Report

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
Inserted at the top of the Repeat Region - columns are now ok but the menu
bar will not work vertically, it only opens Horizontally.

|
Mark as:
Currently Being Moderated

15. Ben Pleysier,

Jul 15, 2012 6:21 PM in reply to Dano4193

Report

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

|
Mark as:
Currently Being Moderated

16. Dano4193,

Jul 15, 2012 6:28 PM in reply to Ben Pleysier

Report

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.

|
Mark as:
Currently Being Moderated

17. Ben Pleysier,

Jul 15, 2012 6:30 PM in reply to Dano4193

Report

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

Gramps

|
Mark as:
Currently Being Moderated

18. Dano4193,

Jul 15, 2012 9:19 PM in reply to Ben Pleysier

Report

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.

|
Mark as:
Currently Being Moderated

19. Ben Pleysier,

Jul 16, 2012 4:35 AM in reply to Dano4193

Report

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

|
Mark as:
Currently Being Moderated

20. Dano4193,

Jul 16, 2012 6:44 PM in reply to Ben Pleysier

Report

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

|
Mark as:
Currently Being Moderated

21. Ben Pleysier,

Jul 16, 2012 7:42 PM in reply to Dano4193

Report

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

|
Mark as:
Currently Being Moderated

22. Dano4193,

Jul 16, 2012 8:24 PM in reply to Ben Pleysier

Report

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

|
Mark as:
Currently Being Moderated

23. Ben Pleysier,

Jul 16, 2012 11:00 PM in reply to Dano4193

Report

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

|
Mark as:
Currently Being Moderated

24. Dano4193,

Jul 18, 2012 3:57 PM in reply to Ben Pleysier

Report

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?

|
Mark as:
Currently Being Moderated

25. Ben Pleysier,

Jul 18, 2012 4:57 PM in reply to Dano4193

Report

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

|
Mark as:
Currently Being Moderated

26. Dano4193,

Jul 18, 2012 6:19 PM in reply to Ben Pleysier

Report

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?

|
Mark as:
Currently Being Moderated

27. Scott - Columbus, OH,

Jul 18, 2012 7:06 PM in reply to Dano4193

Report

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

|
Mark as:
Currently Being Moderated

28. Dano4193,

Jul 19, 2012 12:12 AM in reply to Scott - Columbus, OH

Report

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.

|
Mark as:
Currently Being Moderated

29. Ben Pleysier,

Jul 19, 2012 12:24 AM in reply to Scott - Columbus, OH

Report

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

Gramps

|
Mark as:
Currently Being Moderated

30. Ben Pleysier,

Jul 19, 2012 12:32 AM in reply to Dano4193

Report

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

|
Mark as:
Currently Being Moderated

31. dixey-rose,

Jul 19, 2012 6:57 AM in reply to Ben Pleysier

Report

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.

|
Mark as:
Currently Being Moderated

32. Ben Pleysier,

Jul 19, 2012 7:26 AM in reply to dixey-rose

Report

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

|
Mark as:
Currently Being Moderated

33. Dano4193,

Jul 19, 2012 9:31 AM in reply to Ben Pleysier

Report

Will do thanks.

|
Mark as:
Currently Being Moderated

34. Dano4193,

Jul 19, 2012 1:40 PM in reply to Ben Pleysier

Report

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...:(

|
Mark as:
Currently Being Moderated

35. dixey-rose,

Jul 19, 2012 6:03 PM in reply to Ben Pleysier

Report

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.

|
Mark as: