Forums

brianatlarge

Website: http://stuckpixelstudio.com/clients/carolinapeo/

So on my navigation bar, I have a 1px wide slice of a gradient that is repeating horizontally across the nav bar. On the left side and right side, I want to replace the background image with an image that has a rounded corner. For some reason, I can't get it to override the background image that is already set.

HTML:

<ul id=\"navigation\">
				<li class=\"first\"><a href=\"#\">Home</a></li>
				<li><a href=\"#\">Company Profile</a></li>
				<li><a href=\"#\">Why use a PEO</a></li>
				<li><a href=\"#\">The Industry</a></li>
				<li><a href=\"#\">Opportunity</a></li>
				<li><a href=\"#\">Additional Services</a></li>
				<li><a href=\"#\">Contact</a></li>
			</ul>

CSS:

#navigation {color:#ffffff; display:block; list-style: none;; width:778px; height:42px; min-height:42px; margin-top: 20px;}
#navigation li {float:left; text-align: center; line-height: 42px; display:block; background-image:url(images/buttonslice.png); height:42px; min-height:42px;}
#navigation li:hover {float:left; text-align: center; line-height: 42px; display:block; background-image:url(images/buttonslice-over.png); height:42px; min-height:42px;}
#navigation a {display:block; background:url(images/divider.png) repeat-y left top; text-decoration:none; color: #ffffff; padding: 0 10px;}

#navigation .first li {background-image:url(images/leftedge.png) !important;}
#navigation .first  li:hover {background-image:url(images/leftedge-over.png) !important;}

Thanks.

Cotton

It looks to me as if you've got your class in the wrong place.

You have:


#navigation .first li {your styles}

And you should have


#navigation li.first {your styles}

brianatlarge

Ok cool. Now I have a different problem. Is there any way that I can get the side image of the navigation bar to where on the left side, it just shows the rounded part, but then it repeats horizontally to the right but only repeats the right side. Here's a picture to better illustrate what I want.

Cotton

What you should probably do is leave the normal repeating slice as the background, and set your li to position: relative, and then absolutely position the corner piece. Without testing, I believe something like this may work.

css


#navigation li {float:left; text-align: center; line-height: 42px; display:block; background:url(images/buttonslice.png) repeat-x; height:42px; min-height:42px; position: relative;}

#navigation li .leftEdge{background: url(images/leftedge.png) no-repeat; width: 5px; height: 42px; position: absolute; left: -1px; top: -1px;}

html


<li><a href=\"#\">Home</a><div class=\"leftEdge\"></div></li>

treehouse : what would you like to learn today?

Forums

Problem with specificity