Li background-image : li background « Tags « HTML / CSS






Li background-image

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style rel="stylesheet" type="text/css">
#main {
  padding: 0 0 145px 0;
  display: table; /
  float: left;
}

#navigation {
  width: 202px;
  float: left;
  font-family: Arial;
  font-size: 12px
}

#navigation h3 {
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: #140A00;
  display: block;
  background-color: #CCCAC4;
  width: 186px;
  line-height: 34px;
  padding: 0 0 0 15px;
}

#navigation ul {
  display: block;
  width: 202px;
  margin: 10px 0 17px 0;
  list-style-type: none
}

#navigation li a {
  color: #140A00;
  text-decoration: underline
}

#navigation li {
  padding: 0 0 0 12px;
  margin: 0 0 0 15px;
  background-image: url(images/bullet.gif);
  background-position: 0px 7px;
  background-repeat: no-repeat;
  line-height: 20px;
}


</style>
</head>
<body>
  <div id="main">
    <div id="navigation">
      <h3>Blog Navigation</h3>
      <ul>
        <li><a href="index2.html">Email Updates</a></li>
        <li><a href="index2.html">Comment Tracker</a></li>
        <li><a href="index2.html">Popular Blog Entries</a></li>
        <li><a href="index2.html">SEOmoz Members</a></li>
        <li><a href="index2.html">Blog Disclaimer</a></li>
      </ul>
      <h3>Categories</h3>
      <ul>
        <li><a href="index2.html">Blog promotion</a></li>
        <li><a href="index2.html">Branding</a></li>
        <li><a href="index2.html">Business</a></li>
        <li><a href="index2.html">Clients</a></li>
        <li><a href="index2.html">Link Building</a></li>
        <li><a href="index2.html">Main</a></li>
        <li><a href="index2.html">Marketing</a></li>
        <li><a href="index2.html">Personal</a></li>
        <li><a href="index2.html">Reputation</a></li>
        <li><a href="index2.html">Management</a></li>
        <li><a href="index2.html">SEO</a></li>
        <li><a href="index2.html">SEO Industry News</a></li>
        <li><a href="index2.html">SEO Marketing</a></li>
        <li><a href="index2.html">Web Analytics</a></li>
        <li><a href="index2.html">Website Design</a></li>                                    </ul>
      <h3>Archives</h3>
      <ul>
        <li><a href="index2.html">January 2008</a></li>
        <li><a href="index2.html">February 2008</a></li>
        <li><a href="index2.html">March 2008</a></li>
        <li><a href="index2.html">April 2008</a></li>
        <li><a href="index2.html">May 2008</a></li>
        <li><a href="index2.html">June 2008</a></li>
        <li><a href="index2.html">July 2008</a></li>
        <li><a href="index2.html">August 2008</a></li>
      </ul>
    </div>

  </div>
</body>

</html>

   
    
    
    
  








Related examples in the same category

1.LI background: url(search.gif) no-repeat;
2.Add list background image
3.Add different background image for each LI
4.li background: url(search_32.gif) no-repeat;
5.background for ul and li