Left list menu and three columns : List menu « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. List menu

Left list menu and three columns

  



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>CSS Positioning Example</title>
  <style rel="stylesheet" type="text/css">
#page {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 800px;
  background-color: #fff;
}

#masthead {
  border-bottom: 1px solid black;
}

#sideNav {
  float: left;
  width: 150px;
  background-color: #ccc;
  border-bottom: 1px solid black;
}

#sideRight {
  float: right;
  width: 150px;
  padding: 0px;
  background-color: #aaa;
  border-bottom: 1px solid black;
}

#content {
  margin: 0px 150px 0px 150px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.item {
  padding: 10px;
  min-height: 75px;
  height: 75px;
}

#sideNav a:link,#sideNav a:visited {
  display: block;
  padding: 5px;
}

#sideNav a:hover {
  background-color: #eee;
}
</style>
</head>
<body> 
<div id="page"> 
  <div id="masthead"> 
    <h2>Masthead</h2> 
  </div> 
  <div id="sideNav"> 
    <a href="#">Left link one</a>
    <a href="#">Left link two</a>
    <a href="#">Left link three</a>
    <a href="#">Left link four</a>
  </div> 
  <div id="sideRight"> 
     Lorem ipsum dolor sit amet.
  </div> 
  <div id="content"> 
    <div class="item"> 
      <h3>Item One</h3> 
      <p>
       This is a test. 
      </p>
    </div>
    <div class="item"> 
      <h3>Item Two</h3> 
      <p>
       This is a test. 
      </p>
    </div>
  </div> 
</div> 
</body>
</html>








Related examples in the same category

1.Unordered list containing hyperlinks
2.Horizontal list menu
3.Navigational list
4.Expandable left list based menu
5.List based menu
6.Put anchor into li
7.Using image to create non-horizontal links
8.Vertical links