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