Home/ Questions/Q 8555505
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T15:08:16+00:00

Image Sprites , by themselves, are not evil; however, trying to get these to

  • 0

Image Sprites, by themselves, are not evil; however, trying to get these to work in an unordered list is difficult. Going a step further and trying to get this unordered list to display horizontally (working example >> HERE <<) is certainly an enigma.

Here is my jsFiddle Project: jsFiddle: hNJmD

It seems like every time I get something working, I make the smallest edit to customize it for my app and it breaks.

  • Does it matter what order items in a CSS file are declared?
  • Does a <ul> tag have to be defined before a <li> tag?
  • Does height: need to be specified before width:? (I generally try to list things alphabetically so I don’t accidentally have duplicates)

Here is the image I am using as my Sprite:

Sprite

My Goal:

  • Center the menu horizontally the page
  • Have the full image display (all 50 px)
  • Disable the a.hover effect for the active item (Link 1)

The CSS is:

#nav {
  text-shadow: 4px 4px 8px #696969;
  white-space:nowrap;
  vertical-align: middle;
}
#nav ul {
  list-style-type:none; /* removes the bullet from the list */
}
#nav li {
  display: inline-block;
  text-align: center;
  height: 50px;
  width: 192px;    
}
#nav a {
  background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
  display: block;
  color:Blue;
}
#nav a:hover {
  background-position: 0 -50px;
  color:Red;
}
#nav .active, a:hover {
  background-position: 0 0;        
  color:Black;
}
#nav span {
  top: 15px;
  padding-left: 5px;
}
​

The HTML used in the jsFiddle is repeated here as well:

<body>
  <div>
    <ul id="nav">
      <li>
        <a class="active" href="#">
          <span>Link 1</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>Link 2</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>Link 3</span>
        </a>
      </li>
    </ul>
  </div>
<br/>
<br/>
<br/>
<br/>
<div style="text-align:center;">
  <p>REFERENCE: Sprite (Width: 192, Height: 150):</p>
  <img src="http://i.imgur.com/Sp7jc.gif">
</div>
</body>​

Can somebody show me how to get this crazy thing to work?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want it to look like this: jsFiddle example, then this is what I did:

    • Combined your #nav and #nav ul rules since they refer to the same thing.
    • To that rule I added margin:0 auto; and width:600px; which centers the items
    • Then on #nav a I added display: block; and height:50px; which allows the links to take up the proper amount of height.
    • Finally I added a rule, #nav .active:hover that only affects the active element so it doesn’t appear to change.

    And to answer one of your questions about whether the order of CSS rules matters, the answer is yes and no. With respect to width and height in a rule, the order is irrelevant, but the order the rules appear in can matter, as does the specificity of the rule.

    • 0