Right navigation bar : Navigation Bar « CSS Controls « HTML / CSS
- HTML / CSS
- CSS Controls
- Navigation Bar
Right navigation bar
<html>
<head><title></title>
<style type="text/css">
#columnLeft {
margin-top: 0;
padding-top: 0;
float: left;
width: 67%;
background:#fff;
margin-right: 1.67em;
padding-bottom: 20px;
border-right: 1px solid black;
padding-right: 1em;
}
#columnRight {
padding-left: 2em;
margin-top: 0;
padding-top: 0;
}
h1 {
margin-top: 0;
padding-top: 0;
}
li {
list-style: none;
}
#footer {
clear: both;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align: center;
}
</style>
</head><body>
<div id="columnLeft">
<h1>Heading 1</h1>
<h2><a href="">Heading 2</a></h2>
<p>Text <a href="http://www.java2s.com">link</a></p>
<p>Text <a href="">Link</a></p>
</div>
<div id="columnRight">
<p>Text</p>
<div id="navsite">
<h5>Site Navigation:</h5>
<ul>
<li><a href="" id="current">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact</a></li>
</ul>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</p>
</div>
</div>
<div id="footer">
<p>Copyright 2008</p>
</div>
</body>
</html>
Related examples in the same category