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;
}