Forum Moderators: not2easy
I just started with CSS and have made a four button tabbed navigation menu, which changes the background by moving the image the specified amount of pixels to the left. This works fine as long as the text for each button is the same lenght..
Some of them are a little bit longer so they require a different image as a background.
the html code
<ul id="tabnav">
<li class="recipes"><a href="#">Recipes</a></li>
<li class="contact"><a href="#">Contact</a></li>
<li class="articles"><a href="#">Articles</a></li>
<li class="buy"><a href="#">Buy Online</a></li>
</ul>
This css code just change the background image as a rollover. I added this the code below
and hoped that the contact button would use the logo.jpg as a new background instead of the other one. But it didn't really work. Anybody any suggestion how i might get it to work...?
a.contact:hover, a.contact:link, {
background: url("../images/logo.jpg") 0 0 no-repeat;
}
[code]
ul#tabnav {
list-style-type: none;
margin: 0;
padding-left: 40px;
padding-bottom: 24px;
font: bold 11px verdana, arial, sans-serif;
}
ul#tabnav li {
float: left;
height: 21px;
color: #FFFFFF;
margin: 2px 8px 0 2px;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #FFFFFF;
background: url("../images/home.gif") 0 0 no-repeat;
text-decoration: none;
padding: 4px;
}
ul#tabnav a:hover {
background-position: -60px 0;
}
to this:
ul#tabnav .contact a:link {
background-image: url("../images/logo.jpg")
}
or this:
.contact a:link {
background-image: url("../images/logo.jpg")!important;
}
You have to adjust the syntax of the original declaration, and also account for specificity. (No need to worry about the :hover.)
