Footer with background 2 : Footer « CSS Controls « HTML / CSS

Footer with background 2

  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>*KHAKI*</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">

#footer {
  clear: both;
  padding: 5px;
  margin-top: 5px;
  height: 40px;
  font-size: 0.8em;
  border-top: 1px solid #515244;
  color: #eee;
  background: #404040;
}

#footer a:link,#footer a:visited {
  background: inherit;
  color: #acaf2c;
  text-decoration: none;
}

#footer a:hover {
  border-bottom: 1px dashed #858563;
  background: inherit;
  color: #858563;
}
</style>

</head>
<body>
  <div id="footer"> <a href="">homepage</a> | <a href="">contact</a> | <a href="">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | &copy; 2007 Anyone | Design by <a href=""> java2s.com</a> | This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</body>
</html>

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 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 background 2 : Footer « CSS Controls « HTML / CSS

Related examples in the same category