CODEWITHSUNDEEP
htmlcss
Zack
Zack

Reputation: 13982

css different link styles

I am trying to get different 's to look differently, depending on the context. For example, in my html I have 

<li><a href= "#" class= "navlink"> Home </a></li>
<li><a href= "#" class= "navlink"> Types of Insurance </a></li>
<li><a href= "#" class= "navlink"> Insurance Basics </a></li>
<li><a href= "#" class= "navlink"> Customer Center </a></li>
<li><a href= "#" class= "navlink"> About </a></li>

and in my css I have

.navlink : link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}

.navlink : hover 
{
background-color:#ADD8E6;
}
.navlink : visited 
{
background-color:#ADD8E6;
}

But this is not working (the links appear unstylized). How would I fix this?

Upvotes: 0

Views: 171

Answers (3)

user1173363
user1173363

Reputation: 

#nav{
    float: left;
    display: block;
    font-size: 16px;
    /*font-weight: bold;*/  
    font-family: 'Georgia', serif;
}

#nav>li{
    display: block;
    float: left;
    line-height: 36px;
    padding-right: 10px;
    margin-left: 3px;
    margin-right: 3px;
    background:  url(../img/nav-bullet.png) no-repeat center right;
}

#nav li>a:first-letter { 
    font-family: 'YataghanRegular', 'Georgia', serif;   
    font-size: 20px;
}

#nav li>a{ /* Parent Menu without hover*/
    text-decoration: none;
    color: #000000;
    /*color: #CC3700; 606060*/
    padding: 0px 10px 0px 10px;
    display: block; 

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#nav li:last-child{
    background: none;
}

#nav>li:hover>a,
#nav>li.current-menu-item>a{/* Parent menu color with hover */
    /*color: #eee;
    background: #363636;*/
    color:#000000; 
    background: #cce4ff ;
    /*font-size: 12px;*/

    /*background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535)); 
    background: -moz-linear-gradient(top,  #000000,  #353535);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0);*/

    /*text-shadow: 0 -1px rgba(0, 0, 0, 0.7);*/

    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.5); 
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.5); 
    box-shadow: 0px 1px 2px rgba(0,0,0,.5); 
}

Try This..

Upvotes: 1

Purag
Purag

Reputation: 17071

You need to get rid of the space before and after the colon (:).

You can also minimize your code by doing this:

.navlink {
    // styling for unclicked link
}

.navlink:hover, .navlink:visited {
    // styling for hover/visited state
}

I'm combining hover and visited because the only change you've made is the color, and it's the same for both.

Demo.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

There must be no space before or after the :.

Upvotes: 3

Related Questions