How to make a simple footer in HTML/CSS

Submitted by Yorkiebar on Thursday, September 26, 2013 - 05:39.

Language

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. 
  1. <html>
  2. 	<head> <link rel="stylesheet" type="text/css" href="theme.css"></head>
  3. 	<body>
  4. 		<div class='contentFake'></div>
  5. 		<div class='footer'>
  6. 			<div class='footerContent'>
  7. 				Visit us at <a href='http://www.sourcecodester.com'>http://www.sourcecodester.com</a>.
  8. 			</div>
  9. 		</div>
  10. 	</body>
  11. </html>
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. 
  1. <html>
  2. 	<head> <link rel="stylesheet" type="text/css" href="theme.css"></head>
  3. 	<body>
  4. 		<div class='contentFake'></div>
  5. 		<div class='footer'>
  6. 			<div class='footerContent'>
  7. 				Visit us at <a href='http://www.sourcecodester.com'>http://www.sourcecodester.com</a>.
  8. 			</div>
  9. 		</div>
  10. 	</body>
  11. </html>
  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

Add new comment

About text formats
  • 1145 views