Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Video 13 – CSS sprite

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #23525
    westnileBK
    Member

    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>

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.