Navigation sidebar : Siderbar « CSS Controls « HTML / CSS
- HTML / CSS
- CSS Controls
- Siderbar
Navigation sidebar
<!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