All of the hard parts of our CSS Website Design are now finished. The final part of the Website design is creating a footer using CSS!
1. If you have not taken the first 4 parts of this tutorial, you may want to go take them now! If you have been following along, insert the following class into your CSS Styles:
|
.footer {
background-color: EEE; border-top: 1px solid #000; padding: 5px; text-align: center; font-size: 10px; } |
2. This class will have a background color of a light grey, a black border along the top, 5 pixels between the content and the sides, the text will be aligned to the center, and the font size will be 10 pixels. After where you ended your table, insert the following code:
| <div class="footer">Copyright 2005 <a href="http://www.greycobra.com">GreyCobra Productions</a></div> |
3. Of course, you can replace this text with whatever you want your text to be! That is it! You have just completed designing your first CSS Website Layout! Your full code should now look like this:
|
<html>
<head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>My First CSS WebSite</title> <style type="text/css" media="all"> body { margin: 0; padding: 0; color: #000; background-color: #FFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } .header { background-color: #9A060B; color: #FFF; font-size: 24pt; font-weight: bold; padding: 5px; border-bottom: 1px solid #000; } .quote { width: 100%; background-color: #EEE; color: #000; font-size: 8pt; font-weight: bold; padding: 2px; border-bottom: 1px solid #000; text-align: right; } table#main { height: 100%; vertical-align: top; } table#main td { vertical-align: top; } td.leftnav { background: #9D4631; width: 175px; border-right: 1px solid #000; padding: 0px; color: #FFF; font-size: 10px; text-align: center; } td.leftnav div.header { background: #BD1219; color: #FFF; padding: 3px; border-bottom: 1px solid #000; font-size: 12px; font-weight: bold; text-align: center; } td.leftnav div.menu { background: #9B2E1B; padding: 0px; border-bottom: 1px solid #000; } td.leftnav div.menu a { display: block; padding: 2px; margin: 0px; font-size: 10px; color: #FFF; border-style:none; text-align: left; } td.leftnav div.menu a:hover { background: #C58873; color: #FFF; text-align: left; } td.content { width: auto; padding: 0px 5px 5px 5px; font-size: 10px; } td.content div.title { background-color: #FFF; color: #000; border: none; font-size: 18px; font-weight: bold; } td.rightnav { background: #9D4631; width: 175px; border-left: 1px solid #000; padding: 0px; color: #FFF; font-size: 10px; text-align: center; } td.rightnav div.header { background: #BD1219; color: #FFF; padding: 3px; border-bottom: 1px solid #000; font-size: 12px; font-weight: bold; text-align: center; } td.rightnav div.menu { background: #9B2E1B; padding: 0px; border-bottom: 1px solid #000; } td.rightnav div.menu a { display: block; padding: 2px; margin: 0px; font-size: 10px; color: #FFF; border-style:none; text-align: center; } td.rightnav div.menu a:hover { background: #C58873; color: #FFF; text-align: center; } .footer { background-color: EEE; border-top: 1px solid #000; padding: 5px; text-align: center; font-size: 10px; } </style> </head> <body> <div class="header">CSS Website</div> <div class="quote">Because CSS is Awesome</div> <table cellspacing="0" id="main"> <tr> <td class="leftnav"> <div class="header">Menu 1</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <div class="header">Menu 2</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <div class="header">Menu 3</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <br> This is just a place where you can write some brief news, updates, and possibly insert some affiliates or links. You can even put more parts of your navigation menu here! </td> <td class="content"> <div class="title">Content Header</div> Main content goes here! This is just some random text that you can change. Do not leave this dummy text on your actual site. This is not meant to be read, it is meant to be removed. Write news, articles, or whatever other kind of content you would like here.</td> <td class="rightnav"> <div class="header">Menu 1</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <div class="header">Menu 2</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <div class="header">Menu 3</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <br> This is just a place where you can write some brief news, updates, and possibly insert some affiliates or links. You can even put more parts of your navigation menu here! </td> </tr> </table> <div class="footer">Copyright 2005 <a href="http://www.greycobra.com">GreyCobra Productions</a></div> </body> </html> |
Good Luck!
