Forums

westnileBK

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.



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>

begetolo

First of all, i'm not an expert....

I think you have a wrong idea about what a:active means. a:active is just the state when an user is pressing the mousebutton on the link. It has no relation to what page you're on.
http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/interactive/flat/css3-modsel-19.html#foo

Have a look at another video of Chris:
http://css-tricks.com/videos/css-tricks-video-36.php

HTH

treehouse : what would you like to learn today?

Forums

Video 13 - CSS sprite