Using Arrow Image for LI list

    
<!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">
<head>
<title>AUTUMN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
  margin: 0;
  padding: 0;
  font: 75% "Trebuchet MS", tahoma, verdana, arial, sans-serif;
  background: #fff url(01-autumn-img/bg.jpg) center 0%;
  color: #666;
}

#container {
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

/*TITLE BAR*/
#title h1 {
  margin: 0;
  padding: 10px;
  font-size: 1.5em;
  color: #8c9e18;
  background: inherit;
}

/*TOP BANNER*/
#banner {
  width: 600px;
  height: 150px;
  margin-bottom: 10px;
  padding: 0;
  background: url(01-autumn-img/head.jpg);
}

/*CONTAINER*/
.container {
  width: 600px;
  margin: 0;
  padding: 0;
}

/*TOP NAVIGATION*/
#top-nav {
  margin: 0;
  padding: 0 0 20px 0;
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

#top-nav li {
  height: 20px;
  margin: 0;
  padding: 0;
  display: inline;
  list-style-type: none;
}

#top-nav a:link,#top-nav a:visited {
  float: left;
  padding: 0 15px 15px 15px;
  text-decoration: none;
  letter-spacing: 1px;
  color: #666;
  background: inherit;
}

#top-nav a:link.active,#top-nav a:visited.active,#top-nav a:hover {
  background: inherit;
  color: #487500;
  background: url(01-autumn-img/top_menu.gif) no-repeat bottom center;
}

/*MAIN CONTENT*/
#content {
  float: left;
  width: 420px;
  margin: 0;
  padding: 0;
  line-height: 1.8em;
  border-right: 1px solid #eee;
}

#content p {
  margin: 10px;
}

/*TYPOGRAPHY*/
h1 {
  margin-top: 15px;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.5em;
  color: #8c9e18;
  background: inherit;
}

blockquote {
  font-weight: bold;
  font-style: italic;
  color: #b29b35;
}

/*SIDEBAR*/
#side {
  width: 160px;
  margin: 0 0 0 435px;
  padding: 0;
}

#side h2 {
  font-size: 1em;
  color: #9c592c;
  background: inherit;
}

/*SIDE NAVIGATION*/
#side-nav {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #333;
  background: inherit;
}

#side-nav a {
  line-height: 2em;
  background: inherit;
  display: block;
  text-decoration: none;
  background: url(01-autumn-img/side_menu.gif) no-repeat right 0%;
  color: #c86000;
}

#side-nav a#current,#side-nav a:hover {
  text-decoration: none;
  background: #fff url(01-autumn-img/top_menu.gif) no-repeat right 0%;
  color: #000;
}

/*FOOTER*/
#footer {
  clear: both;
  width: 600px;
  padding: 0;
  margin: 0;
  border-top: 1px solid #eee;
  font-size: 0.9em;
  color: #333;
  background: inherit;
}

#footer a:link,#footer a:visited {
  color: #c86000;
  background: inherit;
}

#footer a:hover {
  border-bottom: 1px dashed #eee;
  color: #8c9e18;
  background: inherit;
}

/*CLASSES*/
.more-links {
  padding: 10px;
  margin-left: 0;
  color: #666;
  background: #f7f7f7;
}

.more-links ul li {
  list-style-image: url(01-autumn-img/arrow.png);
  padding-left: 5px;
  margin-bottom: 10px;
}

.news {
  color: #666;
  background: inherit;
}

.myborder {
  border: 1px solid #eeae0e;
  padding: 10px;
}

/*SCROLLBAR*/
div.scroll {
  overflow: auto;
  margin: 0 0 20px 0;
  padding: 1em;
  height: 8em;
  border: 1px solid #eee;
  background: #fff;
  color: #866709;
}

/*LINKS*/
a img {
  border: none;
}

a:link,a:visited {
  text-decoration: none;
  color: #cc6600;
  background: inherit;
}

a:hover {
  text-decoration: none;
  color: #663300;
  background: inherit;
}
</style>


</head>
<body>
<div id="container">
  <div id="title">
    <h1>Your <span style="color:#C4DA64;">Company</span> Name</h1>
  </div>
  <div id="banner"></div>
  <div class="container">
    <ul id="top-nav">
      <li><a class="active" href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Products</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Support</a></li>
    </ul>
  </div>
  <div id="content">
    <h1>Welcome to <span style="font-weight:bold; color:#C4DA64;">Autumn</span> Template</h1>
    <blockquote>This template has been tested in Mozilla and IE6/7 and validates as XHTML 1.0 Transitional using valid CSS.<br />
      For more FREE templates visit my website.</blockquote>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. This is a <a href="http://www.free-css.com/">LINK</a> to nowhere. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. </p>
    <div style="float: right; width: 125px; height: 7em; margin: 15px; font-family: georgia, arial, helvetica; font-size: 16px; font-weight:normal; line-height: 22px; color: #cc9933; text-align: right;"><span style="color:#663300;">"...autumn is a second </span>spring when every <span style="color: #C86000;">leaf is a flower... "</span> </div>
    <p>Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat.</p>
    <h1>About</h1>
    <p><img class="myborder" align="left" hspace="10" src="01-autumn-img/square.gif" alt="image here" title="image here" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis.</p>
  </div>
  <div id="side">
    <h1>Links</h1>
    <div id="navcontainer">
      <ul id="side-nav">
        <li><a href="http://www.free-css.com/">Open Designs</a></li>
        <li><a href="http://www.free-css.com/">CSS Drive</a></li>
        <li><a href="http://www.free-css.com/">Style Gala</a></li>
        <li><a href="http://www.free-css.com/">Listamatic</a></li>
      </ul>
      <h1>News</h1>
      <div class="scroll">
        <h2>January 1st 2006</h2>
        <p class="news">HAPPY NEW YEAR. Use this space as a mini weblog maybe .....</p>
        <h2>Sept 25th 2005</h2>
        <p class="news">or maybe not!</p>
      </div>
    </div>
    <h1>More Links</h1>
    <div class="more-links">
      <ul>
        <li><a href="http://www.free-css.com/">OWD</a></li>
        <li><a href="http://www.free-css.com/">CSS Drive</a></li>
        <li><a href="http://www.free-css.com/">CSS Library</a></li>
      </ul>
    </div>
  </div>
  <div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>
    This work is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>

Related examples in the same category

1.	'li' creates one item in a list
2.	Nested LI tag
3.	Add style to an anchor in a LI tag
4.	Define class for to set its font weight to bold
5.	LI width: 33%
6.	LI margin: 0 0 0.25em 0
7.	LI font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;
8.	Set display to inline to a LI under a UL in DIV
9.	Alignment of list items
10.	Alignment of list items with margin
11.	Three level list
12.	Inline centred list
13.	Right-aligned bullets
14.	Tab like list
15.	li list-style-type: lower-roman;
16.	li text-indent: -0.75em;
17.	UL LI bullet image
18.	LI display: inline;
19.	LI list-style-type: none;
20.	LI line-height: 44px;
21.	List with no margin
22.	Margin for list
23.	Without list type
24.	li { list-style-image: url("http://java2s.com/style/logo.png");}
25.	list-style-position:inside;list-style-position:outside;
26.	list-style: lower-roman inside;
27.	List order and start
28.	nested ordered and unordered lists
29.	HTML for a definition list
30.	HTML and CSS for vertical and horizontal lists
31.	Selecting elements in nested lists
32.	HTML and CSS for two lists with different list-style properties
33.	HTML and CSS for displaying ordered list style types
34.	HTML and CSS for mixed list-style-type values
35.	Using the display property to make a list display inline
36.	Definition List Example
37.	Unordered List Example
38.	Scrolled List Example
39.	Nested Lists
40.	List types
41.	Lists as navigation
42.	Here is a definition list
43.	a nested ordered list
44.	Dropdown List Example
45.	Link list inside a DIV
46.	Page list bottom bar
47.	ul li list-style-type: square;
48.	Image and text list
49.	For unordered lists, there are three: disc, square, and circle.
50.	For ordered lists, there are eleven different styles of marker:
51.	The marker can be removed from either ordered or unordered lists with the none keyword.
52.	Setting style for LI inside a DIV
53.	line-height: 44px; for li
54.	Using double arrow sign for UI LI
55.	Link styles

Using Arrow Image for LI list : li « Tags « HTML / CSS

Related examples in the same category