Two Line footer : Footer « CSS Controls « HTML / CSS






Two Line footer

  
<!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.Footer with copyright notice
2.Shading footer with background image
3.Footer with Div
4.Footer with UL
5.Footer 2
6.Footer with background
7.Footer with DIV and UL
8.position: absolute; for Footer
9.Centered footer
10.Top border for Footer
11.Header, footer, navigation bar, and body
12.Without a footer
13.Footer with solid line
14.clear: both; for the footer
15.Footer with background 2
16.Footer DIV position: absolute;
17.Footer with green background
18.Grey link color for footer
19.Grey footer
20.Wide footer
21.Footer with dark background
22.Four-column footer
23.Footer: clear both
24.Large footer with three columns
25.About me column in the footer
26.Footer with smaller font
27.Footer with Two parts
28.Contact information in the footer
29.Multi-line footer
30.using vertical line to separate footer
31.Three column layout with header and footer