example

Summary:

Footer tag using CSS

    ●   Making Footers stick to the bottom of the page, even though their may not be enough content to push it down, can be a problem.


Learn About:

CSS Code Body Tags HTML tags

  •   If you've been following this series of tutorials, you have created a CSS document with body, html, container, header, navigation and content tags, and maybe some sort of background image or color.


   •   This tutorial is last in a series:

1 - Body    2 - HTML    3 - Containter  4 - Header    5 - Nav     6 - Content   7 - Footer  

Step #1: Create a New CSS Rule ~

Hopefully you've done this tutorial first: 17 Content Area


Create a New CSS Rule …

… click ID and call it footer

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



Step #2: Background Color ~

Under Background, add a color …

footer background color


Step #3: Positioning ~

Under Positioning, set Type to absolute …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and while you're there, set the Width to 100 percent.

width 100 percent

Also, set your height to around 60 px.

Set your height to 60 px

Lastly, set Placement - Bottom to zero

bottom


Step #4: Text-align = Center ~

Under Block, set your text align to Center.

text align center

The final code looks something like this in CSS:

#footer {
     position: absolute;
     width: 100%;
     bottom: 0px;
     background-color: #0F9;
     height: 60px;
     text-align: center;
}

Step #5: Insert the #footer ~

Click Split …

… find the #container tag and click on it.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Click the div tag in the menu bar below the work area …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and that selects the entire contents of the div tag so you know where it begins and ends …

selected tag

Insert the footer ABOVE the closing tag of the #container div

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



Step #6: Copyright Symbol ~

Insert the HTML code for © which © and put your name as author,

Th usually goes at the bottom of the page somewhere - the rubric requires some kind of special character used in your page - Or here is a list of other special characters you can try.

copyright code


Step #7: View your Work ~

Hit small to view your work.

preview


Last Step: Save and Attach ~

Save your styles.css file, attach it and continue working …


Other resources: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page and http://codecamel.com/fullheight