By mxer269 on

Hi,
I'd like to add background images to certain nice menus links on my site. I've identified the element information using fire fox dev, here it is:

a #dhtml_menu-117

Attributes

id = dhtml_menu-117

Ancestors

div #container .front logged-in node-type-page one-sidebar sidebar-left

div #header .header clear-block

div #nav .clear-block

ul #nice-menu-0 .nice-menu nice-menu-down

li #menu-117 .menu-path-node-4

Using this info, what code do I add to nice_menus_default.css to add images to specific links on my site using this nice menus menu?

Thanks for the help!

Comments

hershel’s picture

hershel commented

Sounds like you would need something like:

a#dhtml_menu-117 { background: url('somefile.jpg'); }
mxer269’s picture

mxer269 commented

thanks! that worked!

Is there a way to place an image next to the actual link text? This way, it would be easy to place the images I want to use

hershel’s picture

hershel commented

Try adding

padding-left: 10px;

or some such, to push the text over to the right of the background image. That is the basic concept of making the image appear to be next to the link text.

mxer269’s picture

mxer269 commented

Thanks! to place the image next to the text I ended up adding a "float: right;" and "width: 50px" tag to get it to align next to the text.

Do you by any chance know how to set the width of the entire nice menu? I want it to stretch 100% across the page..right now it's not stretching across the whole page.

Thanks again for your help. I really appreciate it.

hershel’s picture

hershel commented

Perhaps

div#nav { width: 100%; }

then adjust the width of the li selector in the CSS so that they fill the width.

mxer269’s picture

mxer269 commented

for some reason the above code only works when I set a width smaller than 100%.. such as 80%. Though its set to 100% I don't think it's at 100% of the page