Portfolio: Building the Shell

Inserting the Footer

  1. Click the Insert Div Tag button
  2. Change the insert point to "after tag," and select <div id="wrapper"> in the drop down menu to the right
    • For the footer, we will just place it below the wrapper
  3. Type "footer" in the ID box
  4. Insert div Tag
  5. Click the New CSS Rule button
  6. A new CSS Rule dialogue box appears
  7. Click OK
  8. The CSS Rule Definition for #footer dialogue box opens
  9. Select the Block property in the Category column
  10. In the Text-align drop down menu, select "center"
  11. Rule Define
  12. Next, select the box property in the Category columnn
  13. Type 900 in the width box and leave the unit at "px" (pixels)
  14. In the Padding section, UNCHECK the "Same for all" box
  15. Type 8 in the Top box; leave the unit at "px" (pixels)
  16. In the Margins section, UNCHECK the "Same for all" box
  17. In the Right and Left boxes, select auto from the drop down menu to the right of the box
  18. Rule Define
  19. Click OK
  20. The Insert Div Tag dialogue box re-appears
  21. Click OK again
  22. In the index.html document, you should see the footer appear below the wrapper <div> – you've completed the basic layout for the portfolio!
  23. Footer Goes Here
  24. Leave the text "Content for id "footer" goes here" – we will change this text in the next exercise

Next Steps

In the next exercise, you will format the footer content.

Click here for the next tutorial