Grow your CSS skills. Land your dream job.

Video 13 – CSS sprite

  • # November 4, 2008 at 11:11 pm

    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>

    # November 5, 2008 at 3:28 am

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".