Right navigation bar : Navigation Bar : CSS Controls HTML CSS TUTORIALS


HTML CSS TUTORIALS » 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.navioo.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>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo CSS Controls
» Navigation Bar