3

I'm trying to create a css menu bar that has all grey text with the exception of a single link, however every attempt I've made either produces all grey or all green link text.

If you look below, EcoSolutions should be green and the rest grey

I've included my latest attempt.... hopefully someone can put an end to my madness :D

Thanks

<ul id='Navigation' class='MenuBar'>
    <li><a href="../index.php">Home</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../simplify.php">Simplify</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../ecosolutions.php"class="green">EcoSolutions</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../contact_us.php">Contact</a>
        <img src='images/separator.jpg'/></li>          
    <li><a href="../partners.php">Partners</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../services.php">Services</a>
        <img src='images/transSeparator.png'/></li>
</ul>


/****  MenuBar STYLES ****/

.MenuBar
{
    width: 916px;
    padding: 0px 0px 0px 50px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    color: #888;
}
.MenuBar ul
{
    list-style-type: none;
    font-size: .9em;
    cursor: default;
    font-weight: bold;
    padding: 10px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    font-family:Verdana, Geneva, sans-serif;
    color: #888;
}

.MenuBar ul li img
{
    padding: 0px 0px 0px 0px;
    margin: 0px 25px 0px 25px;
    vertical-align: middle;
}

.MenuBar li
{
    list-style-type: none;
    font-size: .9em;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    float: left;
    height: 37px;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    top: auto;
    bottom: auto;
    font-family:Verdana, Geneva, sans-serif;
    color: #888;
}

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}
.MenuBar  ul li a:link, a:visited, a:active 
{
    display: inline;
    cursor: pointer;
    color: #888;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

.MenuBar  ul li a:hover 
{
    display: inline;
    color: #FF0000;
    padding: 0px;
    margin: 0px;
}
1
  • First you need to add a space between the closing tag of the href and the keyword class. Second could you please format the styles as code to make them more readable. Feb 25, 2010 at 17:54

4 Answers 4

7

Try changing this

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

to this

a.green:link, a.green:visited, a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}
2

As Catfish implied, your CSS selectors for the links are incorrect. You must repeat the class in a compound selector.

You will need to change the style on the non-green links, too, like so:

.MenuBar ul li a:link, 
.MenuBar ul li a:visited, 
.MenuBar ul li a:active {
    /* styles here */
}

The problem with that is that those selectors will then apply to the green link, and being more specific, they will override the green link selectors as was written by Catfish. That will have to be changed to be at least as specific as the regular link selectors.

.MenuBar ul li a.green:link, 
.MenuBar ul li a.green:visited, 
.MenuBar ul li a.green:active {
    /* styles here */
}

Hope that helps!

1
  • Thanks everyone!! I missed it by this much!! It works like a charm. actually all the answers work.
    – dmschenk
    Feb 25, 2010 at 20:24
0

See my comment ... but

.MenuBar ul li a.green { color: green; } 

should work.

0

To sum it up, change this

<li><a href="../ecosolutions.php"class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

to this (notice the space between the href="" and the class="")

<li><a href="../ecosolutions.php" class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

then in your css, change this (what you have presently basically means that you have inside another element with the green class like which is not what your HTML says ;) )

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

to this

a.green:link, a.green:visited, a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

You can also be more direct and put

.MenuBar ul li a.green:link, .MenuBar ul li a.green:visited, .MenuBar ul li a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

Hope this helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.