1. Review First – on your own... Go to Day 5 Grab the contents of position review file Place in DW Add styles to recreate – get something close to http://gelstoncafe.com/cpd12/positioning.html http://gelstoncafe.com/cpd12/positioning.html Grab the banner image and place as background in #header

2. Hints! You need: #container { } #header{ } #navcontainer { } #content { } #footer { } Place appropriate styles in each section

3. Container #container { margin-left: auto; margin-right: auto; border: 1px solid #000; width: 760px; margin-bottom: 5px; padding: 0px; background-color: #BEDBA5; }

4. Header #header { background-color: #fff; background-image: url(bannerp.png); background-repeat: no-repeat; height: 150px; margin-left: 0px; }

5. Navcontainer #navcontainer { float: left; width: 140px; margin-top: 5px; margin-bottom: 0px; margin-left: 5px; text-align: center; }

6. Navcontainer: h1 #navcontainer h1 { color: #C7E8AA; font-family: arial; text-transform: uppercase; display: block; font-size: 10pt; border-top: 1px solid #000; border-bottom: 1px solid #000; background-color: #5B7247; margin-left: 10px; margin-bottom: 0px; }

7. Navcontainer: ul #navcontainer ul { padding: 0 0 0 0; list-style-type: none; font-size: 8pt; font-family: arial; height: 15px; margin: 0px; }

8. Navcontainer: a #navcontainer a { display: block; background-color: #ABCE8D; font-family: arial; height: 15px; color: #3E4C32; margin-left: 10px; }

9. Navcontainer: hover #navcontainer a:hover { display: block; background-color: #8AA574; color: #ABCE8D; font-family: arial; font size: 9pt; }

10. Content #content { background-color: #D3D3D3; min-height: 500px; margin-left: 160px; }

11. Content: p #content p { color: #000; font-family: arial; font-size: 8pt; padding: 5px; text-align: justify; margin-top: 0px; }

12. Footer #footer { background: url(footer.png) #8AA574 no-repeat; text-align: right; border-top: 1px solid #627552; font-family: arial; font-size: 8pt; padding: 40px 5px 0px 0; }