Dreamweaver menu bar help please

Lunatyc · 10 Dec 2009 at 14:44

Hi all,

I'm having a problem with the SPRY menu bar in dreamweaver cs4.

The problem is to do with background images on the menu bar, and notably the fact that for the life of me i cannot get the background image to effect top level only, ie I do not want any imagery on teh sub menu items, just the top level.

Now I have managed to get the image onto the top level, but it also effects the sub-menus and I lost as to what I'm missing.

any help would be greatly appreciated.

Thanks

Tripnologist · 10 Dec 2009 at 14:53

Not actually used it but if it's just a nested list, you need to remove the background from the nested items. ie: if the bg is attached to ul li a, you'd need to remove it from ul ul li a

Lunatyc · 10 Dec 2009 at 15:13

Thanks for the reply,

It's done using CSS, so the SPRY menu bar has its own style sheet and then within that there are the individual selectors,

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #666;
padding: 0.5em 0.75em;
color: #000;
text-decoration: underline;
font-size: 17px;
text-align: center;
background-image: url(../Images/buttonimage.jpg);

}

is the code for the main menu bar, but when I apply this, it also applies that buttonimage.jpg background to all the submenu items aswell

gord · 10 Dec 2009 at 15:32

That's because the selector is for any <a> tag within the unordered list with class MenuBarHorizontal.

Can we see the html and css for this? As Trip says, if its just a standard nested list you should be able to apply by css to the li ul li a to get to the nested elements only.

Tripnologist · 10 Dec 2009 at 15:43

Yeah, try adding this.

ul.MenuBarHorizontal ul li a { background-image: none;}

Surprised that dreameaver shorthands padding but not background.

this..
background-color: #666;
background-image: url(../Images/buttonimage.jpg);

could be shortened to this..
background: url(../Images/buttonimage.jpg) #666;

Lunatyc · 10 Dec 2009 at 15:43

Ok thats seems to have done the trick,

Thank you very much for your help

Tripnologist · 10 Dec 2009 at 15:49

Now, in order to help you in the future, do you understand why that worked?

LiE · 10 Dec 2009 at 16:04

Dreamweaver is the devil xD

Lunatyc · 10 Dec 2009 at 16:09

I think so,

Is it realtional to which part of the code you are calling, ie the code you gave me jsut sets the submenu part, the unordered list, to have no background image.

I'm guessing that without that specific code, the submenu items would have been taking the code assigned to the top level menu items?

and yes msm772 it definatley is, I'm more of a 3d artist, but the uni course I'm on seems to want us to know everything media related.

Tripnologist · 10 Dec 2009 at 16:36

Yup, that's pretty much it.

suarve · 10 Dec 2009 at 16:59

Install the web developer plugin for firefox, right click on an element and click inspect element - you can see the full css selector used there.

gord · 11 Dec 2009 at 10:41

suarve said:
Install the web developer plugin for firefox, right click on an element and click inspect element - you can see the full css selector used there.

Or install Firebug, which is a great tool for checking the html and css applied. Shows you what css is being used, what is being superseded etc.