title: HTML and CSS markup for sprite naivgation images
body: <p><strong>Problem</strong></p>
  
  <p>I'm trying to get an effect where I can have images next to my navigation links in the left menu all from a single sprite image. I'm not sure how I should be creating my markup in order to do this correctly. I want the whole image and text to be clickable in order to go to the URL.</p>
  
  <p><strong>Possible solutions</strong></p>
  
  <ul>
  <li>Put an image tag to the left of the ahref link and link it to the same place.</li>
  <li>Use a background image on the ahref link with a margin to make space for it</li>
  <li>Use span tags</li>
  </ul>
  
  <p><strong>Code</strong></p>
  
  <p><a href="http://jsfiddle.net/spadez/Z2qE5/" rel="nofollow">http://jsfiddle.net/spadez/Z2qE5/</a></p>
  
  <pre><code>&lt;ul id="sidenav"&gt;
      &lt;li&gt;&lt;a href="#" title="Home" class="active"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="Home"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="Home"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="Home"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="Home"&gt;Account&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>