Back to CSS Tips
Preview: what the working site looks like.

When you want a customized bullet in front of your unordered list item, you might think to give the list-style-image a path to the bullet image. Something like this - list-style: url(bullet.gif);

While that does present the image for you, it really gives you no control over it. Instead, place the image as a background of the li and you can position it wherever you want.
Click on the above CSS link to see how it's done.

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>     
    <div id="container"> 
	  <ul id="topNav">
		  <li><a href="#">home</a></li>
		  <li><a href="#">about us</a></li>
		  <li><a href="#">portfolio</a></li>
		  <li><a href="#">design process</a></li>
		  <li><a href="#">faq</a></li>
		  <li><a href="#">contact us</a></li>
	  </ul>
		<section>
			<p>
				Your interesting content here
			</p>
		</section>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 0 auto;
	overflow: auto;
	background: #fff;
}
ul#topNav {
	padding: 0;
	list-style: none;
	text-align: center
} 
	#topNav li {
		margin: 0 0 0 12px;
		display: inline-block;
		background: url(bullet.gif) no-repeat left center;
		text-align: center;
	}  
		
			#topNav li a:link,
			#topNav li a:visited {
				line-height: 36px;
				padding: 0 12px 0 24px;
				display: block;
				font-weight: bold;
				text-decoration: none;
				text-transform: uppercase;
			}
			#topNav li a:hover,
			#topNav li a:active {color: #f00;}
section {
	width: 600px;
	margin: 50px auto 200px;
}