Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Change background color in some links in a menu

    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)
    Code:
    <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.

    Code:
    #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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    Code:
    <a href="#" class="other">Home</a>
    <a href="#" class="other">Home</a>
    Code:
    #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.
    Last edited by abduraooft; 07-24-2012 at 01:25 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    DavidStokes (07-24-2012)

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thank you works perfect.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •