Left menu bar aligned to the bottom : Menu « CSS Controls « HTML / CSS






Left menu bar aligned to the bottom

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animals Planet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style rel="stylesheet" type="text/css">
* {
  margin:0;
  padding:0;
}
body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  background:#CCCCCC;
}
#container {
  width:800px;
  margin:auto;
  background:#FFFFFF;
}
#layoutHeader {
  width:800px;
  height:216px;
  background:url(animal-planet-images/headerBackground.jpg) no-repeat;
}
#layoutHeader h1 {
  color:#FFFFFF;
  font-size:36px;
  font-weight:bold;
  padding:20px 20px 0 20px;
}
#layoutHeader h2 {
  color:#FFFFFF;
  font-size:14px;
  font-weight:bold;
  padding:0 20px 0 20px;
}
#layoutHeader h1 a {
  color:#FFFFFF;
  font-size:36px;
  font-weight:bold;
  text-decoration:none;
}
#layoutHeader h2 a {
  color:#FFFFFF;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
}
#layoutCenterBody {
  margin:10px 10px 0 10px;
}
#layoutNavigation {
  border:1px solid #15190A;
  width:200px;
  float:left;
  background:#DCDECC;
}
#layoutNavigation .navTitle {
  background:#15190A;
  height:30px;
}
#layoutNavigation .navTitle h3 {
  color:#FFFFFF;
  font-size:12px;
  font-weight:bold;
  padding:6px 10px;
}
#layoutBodyContent {
  margin-left:220px;
}
#layoutBodyContent a {
  color:#7A7D5F;
  font-size:12px;
  font-weight:bold;
}
#layoutBodyContent h1{
  color:#15190A;
  font-weight:bold;
  font-size:24px;
}
#layoutBodyContent h2{
  color:#15190A;
  font-weight:bold;
  font-size:14px;
  margin-top:10px;
}
#layoutBodyContent p {
  margin-top:10px;
}
.clearer {
  clear:both;
  height:10px;
}
#layoutFooter {
  height:56px;
  background:url(animal-planet-images/menuBackground.gif) repeat-x;
  text-align:center;
}
#layoutFooter p {
  padding-top:10px;
  color:#BCBA9E;
}
#layoutFooter a {
  color:#BCBA9E;
  text-decoration:underline;
}
#layoutFooter a:hover {
  color:#BCBA9E;
  text-decoration:none;
}
/* main menu begins */
#layoutMenu {
  height:56px;
  background:url(animal-planet-images/menuBackground.gif) repeat-x;
}
#layoutMenu ul {
  text-align:center;
  padding-top:17px;
}
#layoutMenu li {
  list-style: none;
  display: inline;
}
#layoutMenu li a {
  padding: 3px 30px 3px 8px;
  text-decoration: none;
  background:url(animal-planet-images/mainMenuList.gif) no-repeat left 5px;
  font-size:12px;
}
#layoutMenu li a:link { 
  color: #ffffff;
  font-weight:bold;
  font-size:12px;
}
#layoutMenu li a:visited { 
  color: #ffffff; 
}
#layoutMenu li a:hover {
  color: #CA9847;
}
/* mein menu ends */
/* left navigation menu begins */
#layoutNavigation ul {
  list-style-type: none;
  margin:10px 0;
}
#layoutNavigation a {
  display: block;
  width: 180px;
  background-color: #DCDECC;
  border-bottom: 1px dotted #15190A;
  margin:7px 10px;
}
#layoutNavigation a:link, #layoutNavigation a:visited {
  color: #15190A;
  text-decoration: none;
}
#layoutNavigation a:hover {
  background-color: #B7BA9E;
  color: #fff;
}
/* left navigation menu ends */
</style>

</head>
<body>
<div id="container">
  <div id="layoutMenu">
    <ul>
      <li><a href="">Amphibians</a></li>
      <li><a href="">Birds</a></li>
      <li><a href="">Bugs</a></li>
      <li><a href="">Fish</a></li>
      <li><a href="">Invertebrates</a></li>
      <li><a href="">Mammals</a></li>
      <li><a href="">Prehistoric</a></li>
      <li><a href="">Reptiles</a></li>
    </ul>
  </div>
  <div id="layoutHeader">
    <h1><a href="">Animals Planet</a></h1>
    <h2>design by <a href="http://www.flash-templates-today.com">flash-templates-today.com</a></h2>
  </div>
  <div id="layoutCenterBody">
    <div id="layoutNavigation">
      <div class="navTitle">
        <h3>TV SHOWS TITLE</h3>
      </div>
      <ul>
        <li><a href="">Meerkat Manor</a></li>
        <li><a href="">Mutual of Omaha's Wild </a></li>
        <li><a href="">Corwin's Quest</a></li>
        <li><a href="">The A-List</a></li>
        <li><a href="">It's Me or the Dog</a></li>
        <li><a href="">Orangutan Island</a></li>
        <li><a href="">The Crocodile Hunter </a></li>
        <li><a href="">Planet's Best with Terri</a></li>
        <li><a href="">Miami Animal Police</a></li>
        <li><a href="">The Most Extreme</a></li>
        <li><a href="">Animal Cops</a></li>
        <li><a href="">Animal Precinct</a></li>
        <li><a href="">Animal Planet Heroes</a></li>
        <li><a href="">Planet's Funniest Animals</a></li>
        <li><a href="">Jane Goodall</a></li>
        <li><a href="">Meerkat Manor</a></li>
        <li><a href="">Mutual of Omaha's Wild</a></li>
      </ul>
    </div>
    <div id="layoutBodyContent">
      <h1>Welcome To Animal Planet</h1>
      <h2>FROM Flash-Templates-Today.com DESIGN TEAM</h2>
      <p>This website template is repeased under a Creative Commons Attribution 2.5 License<br />
        <br />
        We request you retain the full copyright notice below including the link to www.flash-templates-today.com. This not only gives respect to the large amount of time given freely by the developers but also helps build interest, traffic and use of our free and paid designs. If you cannot (for good reason) retain the full copyright we request you at least leave in place the Website Templates line, with Website Templates linked to www.flash-templates-today.com. If you refuse to include even this then support may be affected.<br />
        <br />
        You are allowed to use this design only if you agree to the following conditions:<br />
        - You cannot remove copyright notice from this design without our permission.<br />
        - If you modify this design it still should contain copyright because it is based on our work.<br />
        - You may copy, distribute, modify, etc... this template as long as link to our website remains untouched.<br />
        <br />
        For support visit http://www.flash-templates-today.com/contact.php </p>
      <h2>What does Flash Template mean?</h2>
      <p>Flash Template is a ready-made Flash Site that you can download and use for free! <strong>Flash Template</strong> was created by professional and independent designers for you. You need only to make your adjustments and your flash site is ready. If you open .fla file you can easily change the text information and graphics of the site. There's no need to make animation - our designers already did it. After your text and graphics adjustments you need only to upload .swf file to your server and enjoy your ready Flash Site! Using Free Flash Templates you can save your time and money!</p>
    </div>
  </div>
  <div class="clearer"></div>
  <div id="layoutFooter">
    <p>Copyright  2008. Designed by <a href="http://www.flash-templates-today.com" title="Free Flash Templates">Free Flash Templates</a><br />
      <a href="">Privacy Policy</a> | <a href="">Terms of Use</a> | <a target="_blank" href="http://validator.w3.org/check/referer"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
  </div>
</div>
</body>
</html>

   
    
  








Related examples in the same category

1.Use show or hide UL with link
2.Horizontal menu
3.CSS only menu with mouse over
4.Left bar menu
5.Menu bar with highlight
6.Menu with highlight
7.fixed width floated menu
8.Mouse hover left bar
9.Left navigation bar
10.Use UL and LI to wrap link menu
11.Tab Menu
12.Left bar menu list
13.Top tab menu bar
14.Navigation menu on the top
15.Wide and tall menu
16.Shading menu bar
17.Top menu bar with arrow icon
18.3D top bar background
19.Indented vertical menu
20.Single column layout with top menu bar
21.Two-level left menu bar
22.Right section bar with shading menu
23.Right menu bar with image background
24.Right menu bar with section
25.Top menu bar
26.Using top arrow to indicate top menu selection
27.Wide and tall top menu bar
28.List menu bar with background image
29.Two level menu bar
30.Top menu with arrow indication
31.Two column, two leve top menu bar
32.List menu with image
33.Menu List item
34.List menu bar
35.Top menu list bar with bold bottom
36.Side menu bar
37.Scrollable section in side menu bar
38.Selected menu item indication
39.Card layout with top menu bar
40.Side menu bar with lot of space in between
41.HTML skeleton code for creating a two-level horizontal drop menu
42.using jQuery to toggle a hidden menu
43.Vertical menu
44.Horizontal menu bar
45.Vertical menu bar
46.sliding door menu
47.horizontal list menu
48.Sub navigation menu
49.Pure css menu
50.Two column layout with menu on the left
51.Navigation menu horizontal
52.Pure CSS drop-down menu
53.Menu item with border
54.Vertical menu on the left
55.LI menu
56.Mouse hover effect for left menu
57.Post item layout with menu
58.Left menu bar with mouse hover effect
59.a:hover background: transparent url(img/menu_arrow.gif) bottom center no-repeat;
60.Menu item with border 2
61.Link menu
62.Left menu bar with thicker border
63.Change border and background with mouse hover for left menu bar
64.Nested left menu bar
65.Vertical menu bar 2
66.Fixed left menu bar
67.Dark background for menu bar
68.Link menu item with side bar
69.Tag like top menu bar
70.Two line top menu bar
71.Menu item separated with border
72.Using arrow image to indicate current menu selection
73.Two level top menu bar
74.Tab menu bar with mouse hover effect
75.Menu bar with background image
76.Two level side menu bar
77.Left bar with news item
78.Continue read link