Adding images to ends of Menu UL

HTML & CSS
1

URL: http://tinyurl.com/23kyeqb

I don’t know if this is possible, but I thought I’d check. At each end of the main navigation UL, I have a small, circular image. But when I apply the background image for the whole UL, those images get covered up. Is there a way to make it so those little images show on the ends and have the UL background show in between?

2

Based on the link above, I can’t figure out what you are asking.

Isn’t there only one?

3

I’m a bit confused also :slight_smile:

Do you mean you want an image at the end of each list element?

You can only have one image on the ul but any images on the list won’t get covered up.

You may need to clarify a bit so we can get an idea of what you want exactly.

4

Sorry for the confusion. :slight_smile: I was in a rush when I posted that because my kids woke up and it was time for me to get them ready for school.

Okay, I’ve attached a screen shot of what the ul is supposed to look like. Can you see the little rounded shape on the left side and on the right side?

I tried to add those images by targeting the first and last menu items…


ul#nav li a.salon-menu {
	padding-left: 22px;
	background: url(../images/bg-nav-end-left.png) left 3px no-repeat;
	}

ul#nav li a.contact {
	padding-right: 22px;
	background: url(../images/bg-nav-end-right.png) right 3px no-repeat;
	}

…but then when I apply the general background for the menu itself, it extends to the end and covers up those little images…


ul#nav {
	float: left;
	list-style: none;
	margin: -4px 0 0 5px;
	padding: 0;
	background: url(../images/bg-nav.png) center 2px repeat-x;
	clear: both;
	}

I hope this makes more sense. I’ll appreciate any ideas! :slight_smile:

5

The nav-end images, though very subtle, are visible in Firefox, Safari and IE8, so I guess you are viewing in IE7 (6 looks very messy, so presumably hasn’t been addressed yet).

Selector consistency may be the answer. You currently specify:

ul#nav

ul#nav li a.salon-menu

ul#nav li a.contact

but the list elements are targeted with

#nav li

Try changing #nav li to ul#nav li .

6

I’m actually working in the latest version of Firefox. I just removed (commented out) the background on the ul so you guys can see the images that are on the ends. When the ul background is applied, those rounded images somewhat disappear…they look rectangular instead of rounded as you can see right now.

Thanks for the idea…I changed everything to read ul#nav. :slight_smile:

7

Try using negative margins to shift the images clear of the ul background:

ul#nav li a.salon-menu {
background:url("../images/bg-nav-end-left.png") no-repeat scroll left 3px transparent;
margin-left:-5px;
padding-left:22px;
}

ul#nav li a.contact {
background:url("../images/bg-nav-end-right.png") no-repeat scroll right 3px transparent;
margin-right:-5px;
padding-right:22px;
}
8

I think that may have done it. What do you see? It’s hard for me to see it very well.