Please help with images in CSS

Hi there,

I am trying to create a menu bar in CSS for my site.
I have a backround image displaying ok. But, I want to place an image to the right of my menu bar, which I am having trouble working out how to do.

My menu bar CSS is as follows;

.menubar{
	font-size:14px;font-family:"Trebuchet MS";
	background-image:url(images/menubar.bmp);background-position:0px 0px;float:left;
	width:198px;height:13px;border-bottom:solid 1px #020304;
}

Code (markup):

How can I place a small image approx 12px x 12px at the right of my menu bar? I would prefer to keep it all in the CSS file if possible and not touch the HTML file.

Any help is greatly appreciated.

 

There's things that can be done, and there's things that can't be done. You can't add another background image to an element that already has one. You will have to add another <div> or add an <img /> to the existing menubar. Either way you'll have to touch the HTML file.

 

I just worked out a bit of a hack to get the job done.

.menubar{font-size:14px;font-family:"Trebuchet MS";
	background-image:url(images/menubar.bmp);background-position:0px 0px;float:left;
	width:198px;height:13px;border-bottom:solid 1px #020304;
}

.menubar li{background:url(images/close.bmp) top right no-repeat;list-style-type:none;
	color:#102030;}

Code (markup):

and in my HTML I used;

<span class="menubar"><li>&nbsp</li></span>

Code (markup):

This way I can fully separate my style from my HTML

 

1) span around an LI is invalid markup. You need to reverse those.

2) assuming these are inside a UL, they shouldn't need the extra class if they are all going to be the same...

3) you should always declare a fallback family on your fonts...

4) if this smaller image is only appearing once on the bar, why not put it on the UL?

Could we see your full code, or at least the full menu appearance you are trying to code?

 

Set value to the padding-left property of links
and then set the value of the background position .
There should be an icon/image on the right/left of the link .

 

LOL. This is the first thing I saw when I looked at the post.

 

The font is never actually seen for this item...

 

Then the code doesn't need to be there.

Go through and clean up your code. It will definitely make finding issues and fixing them easier.

 

The problem is that the close button will no longer be there as a result.

 

Close button? Is this Javascript you're doing? What's a close button doing in the menu otherwise, and why aren't any font declarations you need for that button not on... that button. Give fonts to those who need fonts and not to those who don't (if you need fonts on your other li's then fine).

I thought he said there's already a bg image on the menubar (and I'm assuming that's the name of the menu).
But if it's a div called menubar with a ul inside it, that's perfect right there.
menubar holds the bg image of the menu. the ul holds the little 12x12 image. Actually one of the few good reasons to have a div or whatever wrap a ul, to hold more bg images.