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
  4. Click the New CSS Rule button
  5. A new CSS Rule dialogue box appears
  6. Click OK
  7. The CSS Rule Definition for #footer dialogue box opens
  8. Select the Block property in the Category column
  9. In the Text-align drop down menu, select "center"
    10. Rule Define
  10. Next, select the box property in the Category columnn
  11. Type 900 in the width box and leave the unit at "px" (pixels)
  12. In the Padding section, UNCHECK the "Same for all" box
  13. Type 8 in the Top box; leave the unit at "px" (pixels)
  14. In the Margins section, UNCHECK the "Same for all" box
  15. In the Right and Left boxes, select auto from the drop down menu to the right of the box
    16. Rule Define
  16. Click OK
  17. The Insert Div Tag dialogue box re-appears
  18. Click OK again
  19. In the index.html document, you should see the footer appear below the wrapper <div> – you've completed the basic layout for the portfolio!
    20. Footer Goes Here
  20. 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