- This topic is empty.
-
AuthorPosts
-
November 4, 2008 at 11:11 pm #23525westnileBKMember
Hi everyone,
I used Video 13 on CSS sprite as a tutorial for practice. I created a jpg image very similar to the example in the podcast, but instead of 3 tabs, I’m trying to create a 7 tab image navigation. The normal state, and rollover state style works great in both FF and IE. Everything is aligning right as well. But I can’t get the "CURRENT/ACTIVE" style to work. Would someone take a look at my code please? I’m guessing I didn’t get the CSS code right.
Code:ul#nav {
margin-left: 0;
padding-left: 0;}
ul#nav li {
display: inline;
}
ul#nav li a {
margin: 0;
padding: 0;
display: block;
height: 57px;
text-indent: -9999px;
float: left;
}ul#nav li.appetizers a {
width: 177px;
background: url(images/nav-appetizers.jpg) bottom center no-repeat;
}ul#nav li.dips-salsa a {
width: 136px;
background: url(images/nav-dips.jpg) bottom center no-repeat;
}ul#nav li.maindishes a {
width: 134px;
background: url(images/nav-main.jpg) bottom center no-repeat;
}ul#nav li.sidedishes a {
width: 136px;
background: url(images/nav-side.jpg) bottom center no-repeat;
}ul#nav li.desserts a {
width: 134px;
background: url(images/nav-desserts.jpg) bottom center no-repeat;
}ul#nav li.soups-stews a {
width: 145px;
background: url(images/nav-soups.jpg) bottom center no-repeat;
}ul#nav li.beverages a {
width: 159px;
background: url(images/nav-beverages.jpg) bottom center no-repeat;
}ul#nav li a:hover {
background-position: center center;
}
ul#nav li a:active {
background-position: top center;
}HTML code:
<ul id="nav">
<li class="appetizers"><a href="appetizers.html">Appetizers</a></li>
<li class="dips-salsa"><a href="dips_salsa.html">Dips & Salsa</a></li>
<li class="maindishes"><a href="main.html">Main Dishes</a></li>
<li class="sidedishes"><a href="sides.html">Side Dishes</a></li>
<li class="desserts"><a href="desserts.html">Desserts</a></li>
<li class="soups-stews"><a href="soups.html">Soups & Stews</a></li>
<li class="beverages"><a href="beverages.html">Beverages</a></li>
</ul> -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.