PDA

View Full Version : Problem with vertical menu bar


mikefra
06-03-2011, 02:29 PM
Hi, i'm new here and with DW.

My problem is simple, i created 2 differente vertical menubar in the same page. I wanna have different setting on the CSS but i can't. When i change something into the CSS of MenuBar2, Dreamweaver do the same thing for my MenuBar1.

What am I suppose to do??

Thank you

-Mike

DWcourse
06-03-2011, 02:59 PM
You need to create new css rules for menubar2. You can do this by prefacing the selectors for the menubar2 names with ul#menubar2 rather than ul.MenuBarVertical

For example to overwrtie

ul.MenuBarVertical create the rule ul#menubar2

and to overwrite

ul.MenuBarVertical ul.MenuBarSubmenuVisible create the rule ul#menubar2 ul.MenuBarSubmenuVisible

The original rules will apply to both menus and be overwritten in the second menu by the new ul#menubar2 based rules you create. You only need to create rules for the properties you want to differ between the two menus.

mikefra
06-03-2011, 03:29 PM
I try to figured out what you mean... so I know this, ul.MenuBarVertical and ul.MenuBarVertical ul.MenuBarSubmenuVisible are into my SpryMenuBarVertical.css but I don't know how do create de rule ul#menubar2.

do I replace ul.MenuBarVertical by ul#menubar2

do I write ul#menubar2 before or after ul.MenuBarVertical

or can i just copy my SpryMenuBarVertical.css to create a SpryMenuBarVertical2.css and assign it to my menubar2... If I can do that, where in script can i replace SpryMenuBarVertical.css by SpryMenuBarVertical2.css

thanks

-Mike

mikefra
06-03-2011, 04:07 PM
heum ok after like 45min i found how to create rule so i have my ul#menubar2 rule created.

Now i have probleme for overwriting. what do you mean by "You can do this by prefacing the selectors for the menubar2 names with ul#menubar2 rather than ul.MenuBarVertical"

Thanks

-Mike

DWcourse
06-03-2011, 04:19 PM
Let's say you want to make the background color of your links in MenBar2 red rather than gray. This rule governs the link background color:

/* 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;
}

So you need to create a rule like this:

/* Menu items are a light gray block with padding and no text decoration */
ul#Menbuar2 a
{
background: #F00;
}

To change the background color of links only in MenuBar2.

mikefra
06-03-2011, 04:49 PM
Thank you you are very helpfull :D

Everything is ok

Thank you very much

-Mike