Adding a left hand menu

Create a Navigation Division

Now we'll make a left hand navigation bar. This will involve using everything learnt so far plus some new CSS. In the index.html file add the following HTML between the header and content divides:

<p>HTML &amp; CSS for absolute beginners</p>         

</div>        

<div id="navigation">          

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="info/about.html">About us</a></li>          
  <li><a href="info/about.html">The Team</a></li>          
  <li><a href="info/about.html">Products</a></li>          
  <li><a href="info/about.html">Contact us</a></li>        
</ul>        

</div>       

<div id="content">

Styling the navigation division and links

Now, in the CSS file, we'll style the new Navigation Division as follows:

#navigation {    
  width: 180px;    
  height: 200px;    
  background-color: silver;  
}    

#navigation ul {    
  list-style-type: none;    
  padding-left: 0px;    
  margin: 0px;  
}  

#navigation li {
  width: 180px;
}

Unordered Lists are quite fiddly to style because they automatically have margins and left padding set by the browser. You should always set these to your liking, here we have removed them altogether. We have also removed the bullet points by setting list-style-type to none.

By setting the width of the List Items avoids problems in Internet Explorer.

Now we can specifically style links within the Navigation divide. Changing the Anchor from an inline element to a block element means it fills the width of the navigation divide.

#navigation a:link {    
  display: block;    
  padding: 2px 10px 3px 10px;    
  color: black;  
}  

#navigation a:visited {    
  display: block;    
  padding: 2px 10px 3px 10px;    
  color: black;  
}  

#navigation a:hover {    
  background-color: fuchsia;    
  text-decoration: none;  
}  

#navigation a:active {    
  background-color: yellow;    
  text-decoration: none;  
}


Next we move the content area across and up by adjusting its margins. You can set negative margins to help achieve the layout you want. By setting the top margin of the content divide to the exact opposite of the navigation height they appear level.

#content {    
  padding: 10px;    
  margin: -200px 0px 0px 180px;  
}