5 Replies Latest reply on Sep 23, 2011 9:24 AM by MurraySummers

    Navigation with css sprite image active not working

    MariaArgie

      Hi, I'm trying to make a navigation with a sprite image but I can't seem to make the active state work (perhaps because i have a missunderstanding of what the active state really is). What I'm trying to do is for the name of the page to be underlined when viewing it. (orange is for hover state which works fine)

      Any suggestions on what I'm doing wrong?

      Thanks

       

      nav.png

       

      The code is teh following:

      HTML:

      <ul id="nav">

      <li id="nav-home"><a href="index.html">Home</a></li>

      <li id="nav-portfo"><a href="cuant_portfo.html">Portfolio</a></li>

      <li id="nav-wayww"><a href="cuant_wayww.html">Way we work</a></li>

      <li id="nav-rates"><a href="cuant_rates.html">Rates</a></li>

      <li id="nav-contacto"><a href="cuant_contacto.html">Contato</a></li>

      </ul>

       

      CSS:

      #nav,#nav li {
      margin: 0;
      padding: 0;
      list-style: none;
      }


      #nav li{
      text-indent: -9999px;
      }


      #nav a{
      margin:0;
      width: 200px;
      height: 44px;
      display: block;
      float: left;
      position: relative;
      left: 14px;
      top: 110px;
      z-index: 3;
      background-image: url(img/nav.png);
      }


      #nav #nav-home a:link {
      background-position: 0 0;
      }


      #nav #nav-home a:visited {
      background-position: 0 -88px;
      }


      #nav #nav-home a:hover {
      background-position: 0 -44px;
      }


      #nav #nav-home a:active{
      background-position: 0 -88px;
      }


      #nav #nav-portfo a:link {
      background-position: -200px 0;
      }


      #nav #nav-portfo a:visited {
      background-position: -200px -88px;
      }


      #nav #nav-portfo a:hover {
      background-position: -200px -44px;
      }


      #nav #nav-portfo a:active {
      background-position: -200px -88px;
      }

       

      #nav #nav-wayww a:link {
      background-position: -400px 0;
      }


      #nav #nav-wayww a:visited {
      background-position: -400px -88px;
      }


      #nav #nav-wayww a:hover {
      background-position: -400px -44px;
      }


      #nav #nav-wayww a:active {
      background-position: -400px -88px;
      }


      #nav #nav-rates a:link {
      background-position: -600px 0;
      }


      #nav #nav-rates a:visited {
      background-position: -600px -88px;
      }
      #nav #nav-rates a:hover {
      background-position: -600px -44px;
      }


      #nav #nav-rates a:active {
      background-position: -600px -88px;
      }


      #nav #nav-contacto a:link {
      background-position: -800px 0;
      }


      #nav #nav-contacto a:visited {
      background-position: -800px -88px;
      }


      #nav #nav-contacto a:hover {
      background-position: -800px -44px;
      }


      #nav #nav-contacto a:active {
      background-position: -800px -88px;
      }