18 - Footers in Dreamweaver ~

Learn These Tools & Concepts:

Footers are necessary!

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.

  This tutorial is seventh in a series:

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

Other People's Work:

Here are examples of work inspired by this tutorial.

Example 1 Example 2 Example 3 Example 4

 

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

Step #2: Background Color ~

Under Background, add a color …

Step #3: Positioning ~

Under Positioning, set Type to absolute …

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

Also, set your height to around 60 px.

Lastly, set Placement - Bottom to zero

Step #4: Text-align = Center ~

Under Block, set your text align to 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.

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

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

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

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.

Step #7: View your Work ~

Hit to view your work.

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