Originariamente inviato da pierofix
Un esempio veloce. Partiamo dalla struttura di markup:
codice:
<ul id="navigazione">[*]Home[*]Informazioni[*]Note[/list]
Nel CSS nasconderemo il testo e lo sostituiremo con delle immagini di sfondo (che, suppongo, avranno larghezza pari a 200px e altezza pari a 100px):
codice:
ul,
ul *
{
   margin:0; padding:0;
}
   li
   {
      float:left;
      width:200px; height:100px;
   }
      li a
      {
         display:block;
         width:200px; height:100px;
         text-indent:-1000em; text-decoration:none;
         background:no-repeat 0 0;
      }

      #nav_home
      {
         background-image:url('home.gif');
      }
      #nav_home:hover
      {
         background-image:url('home-hover.gif');
      }
      #nav_info
      {
         background-image:url('info.gif');
      }
      #nav_info:hover
      {
         background-image:url('info-hover.gif');
      }
      #nav_note
      {
         background-image:url('note.gif');
      }
      #nav_note:hover
      {
         background-image:url('note-hover.gif');
      }
noto che display: block lo applichi al tag a. Io solitamente lo applico direttamente al tag[*]. è sbagliato?