Spacing Demonstration

The instructor will demonstrate creating styles to control margins and padding for the page elements. These styles have already been declared in your practice sites. They include:

td#content {
padding-bottom: 18px;
padding-left: 18px;
padding-right: 18px;
padding-top: 20px;
}

td#sidenav {
padding-right: 15px;
padding-top: 20px;
width: 180px;
}

table#sideborders {
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-top: none;
margin: 0px;
padding: 0px;
}

1. Open the demonstration template file
2. Delete the 5 spacer graphics
3. Simplify the layout table by:
   1. cutting the <td> containing the content editable region
   2. deleting the leftover <table> where the content used to be
   3. selecting the <td> in the overall table where the content will go
   4. paste in the <td> containing the content editable region
   5. follow steps a. through d. to simplify the sidenav editable region
4. Attach the style sheet file /common/layout.css
5. Apply id="content" to the <td> tag containing the content editable region
6. Apply id="sidenav" to the <td> tag containing the sidenav editable region
7. Apply id="sideborders" to the <table> tag containing both the content and sidenav regions
8. Delete the extra spaces before the text in the pagesig area
9. Apply id="pagesig" to the <td> tag containing the pagesig region