Footer with Div : Footer « CSS Controls « HTML / CSS

Footer with Div

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title></title>
    <style rel="stylesheet" type="text/css">

/* begin Footer */
.Footer
{
  position:relative;
  z-index:0;
  overflow:hidden;
  width: 880px;
  margin: 5px auto 0px auto;
}

.Footer .Footer-inner
{
  height:1%;
  position: relative;
  z-index: 0;
  padding: 8px;
  text-align: center;
}

.Footer .Footer-background
{
  position:absolute;
  z-index:-1;
  background-repeat:no-repeat;
  background-image: url('image-demo-2011/Footer.png');
  width: 880px;
  height: 150px;
  bottom:0;
  left:0;
}


.rss-tag-icon
{
  position: relative;
  display:block;
  float:left;
  background-image: url('image-demo-2011/rssIcon.png');
  background-position: center right;
  background-repeat: no-repeat;
  margin: 0 5px 0 0;
  height: 22px;
  width: 22px;
}




.Footer .Footer-text p
{
  margin: 0;
}

.Footer .Footer-text
{
  display:inline-block;
  color:#E9EBB7;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  letter-spacing: 1px;
}

.Footer .Footer-text a:link
{
  text-decoration: none;
  color: #DDDDD0;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}

.Footer .Footer-text a:visited
{
  text-decoration: none;
  color: #1E1E15;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  text-decoration: none;
}

.Footer .Footer-text a:hover
{
  text-decoration: none;
  color: #1E1E15;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
}
/* end Footer */


    </style>
</head>
<body>
     <div class="Footer">
         <div class="Footer-inner">
             <a href="#" class="rss-tag-icon" title="RSS"></a>
             <div class="Footer-text">
                 <p><a href="#">Contact Us</a> | <a href="#">Terms of Use</a> | <a href="#">Trademarks</a>
                     | <a href="#">Privacy Statement</a><br />
                     Copyright &copy; 2009 ---. All Rights Reserved.</p>
             </div>
         </div>
         <div class="Footer-background"></div>
     </div>

</body>

</html>

1.	Footer with copyright notice
2.	Shading footer with background image
3.	Footer with UL
4.	Footer 2
5.	Footer with background
6.	Footer with DIV and UL
7.	position: absolute; for Footer
8.	Centered footer
9.	Top border for Footer
10.	Header, footer, navigation bar, and body
11.	Without a footer
12.	Footer with solid line
13.	clear: both; for the footer
14.	Footer with background 2
15.	Footer DIV position: absolute;
16.	Footer with green background
17.	Grey link color for footer
18.	Two Line 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

Footer with Div : Footer « CSS Controls « HTML / CSS

Related examples in the same category