...

View Full Version : Change background color in some links in a menu



DavidStokes
07-24-2012, 12:12 PM
I've a menu with 11 links.

I need to have the background color of 4 of these links a different color to the rest.. So they stand out. ( just made all links home for test)


<div id="menu">

<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>


</div>

here is the CSS i've controlling this.



#menu{
height:55px;
line-height:55px;
border-bottom:solid #282828 4px;
border-left:solid #ccc 1px;
border-right:solid #ccc 1px;
border-top:solid #ccc 1px;
text-transform:uppercase;
font-weight:bold;
background-color:#fff;
}

#menu a{
display: block;
float: left;
height:55px;
background-color:#fff;
padding:0px 12px 0 12px;
text-decoration:none;
color:#282828;}

#menu a:hover{background-color:#282828;
color:#fff;
}>

I was trying to add a class to the HREF but I couldn't get it to work. I assume i'm doing something wrong.

any tips would be great.
thanks.

abduraooft
07-24-2012, 12:23 PM
I was trying to add a class to the HREF but I couldn't get it to work. I assume i'm doing something wrong.

<a href="#" class="other">Home</a>
<a href="#" class="other">Home</a>

#menu a.other{
background-color:#ccc;
}

Not sure what went wrong at your end as you haven't given code that doesn't work. Anyway, I guess you need to read the CSS specificity (http://www.htmldog.com/guides/cssadvanced/specificity/).

DavidStokes
07-24-2012, 12:46 PM
thank you works perfect.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum