1. Other
  2. How to make a simple footer in HTML/CSS

How to make a simple footer in HTML/CSS

Submitted by Yorkiebar on Thursday, September 26, 2013 - 05:39.
Language
Other
Introduction: This tutorial will be a code sample of a footer in CSS. Steps of Creation: Step 1: First we need a HTML file to contain our footer. I have created one with a couple of divs and a link to my theme.css CSS file.
Visit us at http://www.sourcecodester.com.
Step 2: Now lets set the default settings for our html file in our theme.css.
  1. *{
  2.         margin: 0px;
  3.         padding: 0px;
  4.         color: #fff;
  5. }
  6.  
  7. body{
  8.         width: 100%;
  9. }
Step 3: Next I have set a height for my fake div so it shows up properly...
  1. .contentFake{
  2.         background-color: #333;
  3.         height: 770px;
  4. }
  5.  
  6. .footer{
  7.         width: 100%;
  8.         position: fixed;
  9.         margin-bottom: 0px;
  10.         height: 80px;
  11.         background-color: #1A1A1A;
  12.         display: block;
  13. }
  14.  
  15. .footerContent{
  16.         width: 80%;
  17.         margin: auto;
  18.         padding: 5px;
  19.         text-align: center;
  20.         border-left: 1px solid #fff;
  21.         border-right: 1px solid #fff;
  22. }
For our footer we have set it fixed to the bottom of the screen with a 80px height, 100% width and a slightly different colour to our main background to differentiate it. I have also given my footerContent a border on the left and right sides and given it a slightly smaller width. Project Complete! Below is the full source and download to the files.
Visit us at http://www.sourcecodester.com.
  1. *{
  2.         margin: 0px;
  3.         padding: 0px;
  4.         color: #fff;
  5. }
  6.  
  7. body{
  8.         width: 100%;
  9. }
  10.  
  11. .contentFake{
  12.         background-color: #333;
  13.         height: 770px;
  14. }
  15.  
  16. .footer{
  17.         width: 100%;
  18.         position: fixed;
  19.         margin-bottom: 0px;
  20.         height: 80px;
  21.         background-color: #1A1A1A;
  22.         display: block;
  23. }
  24.  
  25. .footerContent{
  26.         width: 80%;
  27.         margin: auto;
  28.         padding: 5px;
  29.         text-align: center;
  30.         border-left: 1px solid #fff;
  31.         border-right: 1px solid #fff;
  32. }

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
HTML
css
Footer

Add new comment

About text formats
  • 1214 views