Footer with smaller font : Footer « CSS Controls « HTML / CSS

Footer with smaller font
  
<!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">
<head>
<title>HINT of BLUE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body { 
margin : 0;
padding : 0;
text-align : center;
font : 73% verdana, tahoma, "Trebuchet MS", arial, sans-serif;
background : #fff url(55_hint_of_blue-images/bg.gif) repeat-y top center;
color : #666;
} 
      /*WRAP*/
#box { 
position : relative;
width : 782px;
margin-right : auto;
margin-left : auto;
text-align : left;
padding : 0px;
margin-top : 0;
}
      /*TITLE BAR*/
#title { 
width : 760px;
margin : 0 0 0 11px;
padding : 0;
height : 30px;
background : #fff;
color : #000;
} 
#title h1 { 
font : 100% georgia, tahoma, verdana, arial, sans-serif;
text-align : right;
letter-spacing : 3px;
margin : 0 10px 0 11px;
padding-top : 10px;
background : inherit;
color : #000;
} 
      /*TOP BANNER*/
#header { 
width : 760px;
height : 150px;
margin : 0 0 20px 11px;
padding : 0 0 0 0;
background : #fff url(55_hint_of_blue-images/header.jpg);
color : #000;
} 
#header h1 { 
font : 140% georgia, tahoma, verdana, arial, sans-serif;
text-align : left;
letter-spacing : 5px;
margin : 0 10px 0 35px;
padding : 10px 0 0 0;
background : transparent;
color : #4A83BA;
} 
      /*TOP NAVIGATION*/
.container { 
width : 760px;
padding-top : 10px;
margin-left : 11px;
}
#navCircle { 
margin : 0;
padding : 0 0 20px 10px;
border-bottom : 1px solid #eee;
} 
#navCircle li { 
margin : 0;
padding : 0;
display : inline;
list-style-type : none;
} 
#navCircle a:link, #navCircle a:visited { 
background : #fff;
float : left;
line-height : 14px;
font-family : georgia, tahoma, verdana, arial, sans-serif;
font-weight : normal;
padding : 0 20px 6px 12px;
text-decoration : none;
color : #4a82ba;
} 
#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover { 
padding-bottom : 6px;
color : #000;
background : transparent url(55_hint_of_blue-images/pointer.gif) no-repeat bottom center;
} 
      /*MAIN CONTENT*/
#main { 
float : left;
width : 532px;
padding : 1px;
margin-top : 10px;
line-height : 1.8em;
} 
#main h1 { 
margin : 10px 30px 0 20px;
padding : 3px;
text-align : left;
letter-spacing : 3px;
font : 150% georgia, tahoma, verdana, arial, sans-serif;
background : inherit;
color : #000;
} 
      /*SIDEBAR*/
#sidebar { 
width : 200px;
margin : 10px 0 0 540px;
padding-left : 10px;
border-left : 1px solid #eee;
line-height : 1.8em;
} 
#sidebar h1 { padding : 10px;
margin : 0;
font : 100% georgia, tahoma, verdana, arial, sans-serif;
background : inherit;
color : #aaa;
} 
.sideheader { 
margin-bottom : 20px;
text-align : center;
letter-spacing : 5px;
font : 140% georgia, tahoma, verdana, arial, sans-serif;
padding : 3px 0;
color : #fff;
background : #000 url(55_hint_of_blue-images/sideheader.jpg);
} 
      /*SIDE MENU*/
#sidenav {
margin : 0;
padding : 0;
list-style-type : none;
font : 100% georgia, tahoma, verdana, arial, sans-serif;
background : inherit;
color : #c86000;
} 
#sidenav a { 
display : block;
width : 90%;
margin : 15px;
padding-left : 25px;
text-align : left;
text-decoration : none;
background : transparent url(55_hint_of_blue-images/active.gif) no-repeat left center;
color : #aaa;
} 
#sidenav a#current, #sidenav a:hover { 
text-decoration : none;
background : transparent url(55_hint_of_blue-images/hover.gif) no-repeat left center;
color : #4a83ba;
} 
      /*FOOTER*/ 
#footer { 
margin : 40px 0 0 0;
padding : 0;
border-top : 1px solid #ccc;
font-size : 0.8em;
text-align : center;
background : inherit;
color : #aaa;
} 
#footer a:link, #footer a:visited { 
background : inherit;
color : #4a82ba;
} 
#footer a:hover { 
border-bottom : 1px solid #000;
color : #000;
}
      /*CLASS*/
.news { 
font-size : 1em;
background : inherit;
color : #666;
}
.myborder {
float: left; 
border : 1px solid #aaa;
padding : 10px;
margin: 10px;
} 
      /*TYPOGRAPHY*/
p { 
padding-left : 20px;
padding-right : 15px;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
} 
      /*SCROLLBAR*/ 
div.scroll { 
margin : 5px 0 40px 5px;
height : 15em;
width : 170px;
overflow : auto;
border : 0px solid #aaa;
padding : 0.5em;
background : #fff;
color : #666;
} 
      /*LINKS*/ 
a img { 
border : 0;
} 
a:link, a:visited { 
background : inherit;
color : #4a82ba;
text-decoration : none;
} 
a:hover { 
background : inherit;
text-decoration : none;
color : #000;
}

</style>


</head>
<body>
<div id="box">
  <div id="title">
    <h1><a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a></h1>
  </div>
  <div id="header">
    <h1>www.COMPANY NAME.net</h1>
  </div>
  <div class="container">
    <ul id="navCircle">
      <li><a class="active" href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Products</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Support</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
  </div>
  <div id="main">
    <h1>Welcome to <span style="font-weight:bold; color:#4A82BA;">Hint of Blue</span> Template</h1>
    <blockquote> This template has been tested in Mozilla Firefox and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. It will work in browser widths of 800x600, 1024x768 &amp; 1280x1064.<br />
      For more FREE CSS templates visit <a href="http://www.mitchinson.net">my website</a>.</blockquote>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam vitae purus non nisi ultricies volutpat. Mauris et pede eget elit congue dictum. Etiam auctor, sem eget rhoncus viverra, dolor sem vehicula nisl, ut imperdiet dui purus non dui. In ac tellus. </p>
    <h1>About Our Company</h1>
    <p><img class="myborder" src="55_hint_of_blue-images/sq.gif" alt="icon"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam vitae purus non nisi ultricies volutpat.</p>
  </div>
  <div id="sidebar">
    <h2 class="sideheader">Links</h2>
    <div id="navcontainer">
      <ul id="sidenav">
        <li><a href="http://www.free-css.com/">Snapp Happy</a></li>
        <li><a href="http://www.free-css.com/">TODC</a></li>
        <li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
        <li><a href="http://www.free-css.com/">James Koster</a> </li>
        <li><a href="http://www.free-css.com/">CSS play</a></li>
        <li><a href="http://www.free-css.com/">Listamatic </a> </li>
      </ul>
    </div>
    <h2 class="sideheader">News</h2>
    <div class="scroll">
      <h1>April 09 2007</h1>
      <p class="news">Use this space as a mini weblog maybe .....</p>
      <h1>April 08 2007</h1>
      <p class="news">.... or for news &amp; updates.</p>
      <h1>April 07 2007</h1>
      <p class="news">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. </p>
    </div>
    <h2 class="sideheader">Information</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam vitae purus non nisi ultricies volutpat.</p>
  </div>
  <div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>
    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>
</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 with background 2
16.	Footer DIV position: absolute;
17.	Footer with green background
18.	Grey link color for footer
19.	Two Line footer
20.	Grey footer
21.	Wide footer
22.	Footer with dark background
23.	Four-column footer
24.	Footer: clear both
25.	Large footer with three columns
26.	About me column in the footer
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 smaller font : Footer « CSS Controls « HTML / CSS

Related examples in the same category
