Home/ Questions/Q 130461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T05:57:06+00:00

I’m trying to create a simple image navigation for my site, using CSS to

  • 0

I’m trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:

<div id='nav'>   <ul>     <li class='current about'>       <a href='#about' title='about'>about</a>     </li>     <li class='contact'>       <a href='#contact' title='contact'>contact</a>     </li>     <li class='networks'>       <a href='#networks' title='networks'>networks</a>     </li>   </ul> </div>

Here is my CSS:

#nav li {    display: block;    float:left;    background-image: url('images/nav-normal.png');    height:47px;    text-indent: -9999px; }

I have also set up background-positions for the individual list-items because I’m using image sprites. Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.

    • 0