PDA

View Full Version : Multiple Spry menues on page problems


xboxdynasty
10-03-2011, 05:03 PM
I am trying to get multiple menus on this page:

As you can see they are bleeding into each other. I had main working properly. Once I added the activities spry the problems began. Dreamweaver labels them Spry 1 2 etc but does not differentiate when I change the background images.

http://reac.students.mtu.edu/REAC/Webmaster/Test/REAC/index.html

Any ideas for using multiple sprys? I searched the forums here and didn't find any help.

DWcourse
10-03-2011, 09:19 PM
The default CSS for Spry menus applies to all menus on a page. To make menus look different you have to add additional styles which use the menu name as a selector.

In other words, if you want a different background for links in menu2 you need to add a style:

#MenuBar2 a

Since the id selector (#) is more specific than the ul selector it will overwrite the link styles for MenuBar2 only.

You only have to create new rules for the styles that will be different in MenuBar2.

xboxdynasty
10-11-2011, 02:05 PM
Ok I'm having issues implementing your suggestion, but I don't think I'm far off:

Step 1
Copied "SpryMenuBarHorizontal.css"

and renamed it #MenuBar2 a.css
That worked fine and I now have additional background image css to change for the second menu

Step 2
Change:
<ul id="MenuBar2 a" class="MenuBarHorizontal">
To
<ul id="#MenuBar2 a" class="MenuBarHorizontal">

Problem:
Step 2 crashes DMW, so I must be doing something wrong.

Corrosive
10-11-2011, 02:15 PM
You shouldn't need to change the change the id. This symbol # denotes an id itself.

xboxdynasty
10-11-2011, 02:22 PM
Ok but using only Step 1 doesn't work in itself. The background images aren't changing in Menu2, staying the same as Menu1.

Corrosive
10-11-2011, 02:30 PM
OK, I see what you have done. DWCourse meant to define a single style rather than copy the whole sheet I think.

You need to understand what the selectors mean;


#MenuBar2 a


The # means it is an id called MenuBar2. The 'a' at the end shows that you are wanting to apply the style to any anchor (link) within the id of MenuBar2.

I am not a great fan of Spry and so don't know the ins and outs of what the styles are. Perhaps JC can come and help a little more.

In the meantime you really need to get your head round what the different selectors mean in CSS to debug issues like this yourself. You have just hit the WYSIWYG brick wall I'm afraid. Try this; http://www.htmldog.com/guides/cssbeginner/

xboxdynasty
12-05-2011, 02:08 AM
OK, I see what you have done. DWCourse meant to define a single style rather than copy the whole sheet I think.

You need to understand what the selectors mean;


#MenuBar2 a


The # means it is an id called MenuBar2. The 'a' at the end shows that you are wanting to apply the style to any anchor (link) within the id of MenuBar2.

I am not a great fan of Spry and so don't know the ins and outs of what the styles are. Perhaps JC can come and help a little more.

In the meantime you really need to get your head round what the different selectors mean in CSS to debug issues like this yourself. You have just hit the WYSIWYG brick wall I'm afraid. Try this; http://www.htmldog.com/guides/cssbeginner/

Thanks I moved to prebuilt java script menus. Much easier to learn and leave comments once I learn what changes what. Coming along now!