1. Page Styling

1. Download person.jpg, lab8.html and lab8.css to your lab8 folder.
2. Examine lab8.html in a browser and Notepad++.
3. Open lab8.css in Notepad++ and then add the following styles:

   body {
   	background: black;
   }
   
   article {
   	background: white;
   	margin: auto;
   	width: 600px;
   }
   	

4. Notice how the text is too close to the black background? Fix this problem using the proper CSS property. Ask if you are not sure how to fix this.
5. Change the body background color to gray and then add a 1 pixel solid black boarder to the article.
6. Add a box-shadow to the article with the following values: 10px 10px 0px black;
7. Notice how the shadow is just solid black. Change the box-shadow so that it blurs.
8. Visit the Background Pattern Website and design your own tiling background pattern.
9. Download your pattern and save it to your lab8 folder as bg.png.
10. Change the CSS of the body to: background: gray url(bg.png);
11. Note that if the background image cannot be displayed then the background color will default to gray.
12. Your finished page design should look something like this:
    

2. Image Styling

1. In lab8.html notice that there is an image tag wrapped in a photo div (i.e., div class="photo").
2. In lab8.css use CSS to make the photo div float right.
3. If you did it correctly the image will no longer be between two paragraphs. Instead, the image will be aligned to the right and the paragraph text should flow around it to the left.
4. Notice that the main text is very close to the image. Give the photo div margin so the text never gets within 10px of the image.
5. Use CSS to decorate the photo div by giving it a background color, padding, and a box-shadow. Also, center the text and set the margin of the paragraph inside the photo div to be zero, so the caption will be compact and centered.
6. Your finished image should look something like this:
   
7. Download, border.png to your lab8 folder.
8. In lab8.css, give the photo div a border-width of 25px.
9. Add the following border image code: border-image: url(border.png) 25 25 stretch;
10. Your finished image should look something like this:
    
11. Finally, find your own border image by doing a Google image search on the key phrase "picture frame border image"
12. Download your image to your lab8 folder and change your CSS to use your downloaded border image.
13. Note that you may have to change the width parameters so your border renders properly. The border image I selected had a width of 25px.
14. Show your instructor your work.

3. Text Container Positioning

1. To better understand how each text container is positioned, add a colored border and colored text as follows:

   header, footer {
   	border: 1px solid red;
   	color: red;
   }
   
   #main {
   	border: 1px solid blue;
   	color: blue;
   }
   	

2. Using the code above as a model, make the #ads section green and #related section purple.
3. Your finished page should look something like this:
   
4. Notice how the floating image hovers over the colored borders. This will not look good if we add decorative borders to these text containers.
5. In lab8.css, add the property overflow: auto to the #main section. This will resize the height of this text container so that in will encapsulate the floating image. Warning: If this section had an explicit height, scroll bars would be created instead of resizing the section.
6. Save lab8.html and lab8.css, and reload lab8.html in a web browser
7. Notice that the blue border now wraps around the floating image.
8. Also, notice that the first paragraph of the #main section is rendered above the image and that there is not enough text to fill the rest of the text container. This is because the photo div is defined below the first paragraph. Thus, the first paragraph get rendered before the image can be rendered.
9. Move the photo div so that it is outside the #main section, i.e., it is in-between the #related section and #main section.
10. Add the following CSS to the #main section:

    	background-color: #ccc;
    	padding: 10px;
    	text-align: justify;
    	box-shadow: 5px 5px 5px #888;	
    	

11. Save lab8.html and lab8.css, and reload lab8.html in a web browser
12. Your finished page should look something like this:
    
13. Move the photo div so that it remains inside the #main div but comes before the first paragraph.
14. Save lab8.html and lab8.css, and reload lab8.html in a web browser
15. Your finished page should look something like this:
    
16. The design above treats the image as if it is part of the main section, so the border get drawn around it.
17. Using the concepts that you have learn, try to make your page look like this:
    
18. Hints: Resize the article to 800px to make room for the horizontal layout; Give the #main section a width of 400px; Float the #related and #ads sections to the right and give them each widths of 150px. Give the #related and #ads sections padding and margin so they separate and so the text isn't too close to the border edge; Make the footer clear: both so that the footer renders below the containers that are floating right and floating left.

4. Navigation Menu Formatting

1. Examine the navigation menu at the top of lab8.html. Notice that it is marked-up as an unordered list.
2. To remove the list formatting, add the following CSS code to lab8.css:

   nav ul, nav li {
   	padding: 0;
   	margin: 0;
   }
   
   nav li {
   	list-style: none;
   }
   	

3. To understand the positioning of the hyperlinks, add the following CSS code: nav a { border: 1px solid orange; }. Notice that this CSS only changes hyperlinks in the nav.
4. In the next few steps we will transform the top area of the website to look like this:
   
5. Make the nav hyperlinks larger buttons by making them display: block with a height: 32px and padding: 5px 25px;. Also, make the top right and top left borders round:
   border-top-left-radius:1em; border-top-right-radius:1em;

   nav a {
   	// Insert you code here
   }	
   	

6. Make each list item float: left;

   nav li {
   	// Insert you code here
   }	
   	

7. Make the nav ul overflow: hidden; and give it height: 32px; and background-color: gray;

   nav ul {
   	// Insert you code here
   }	
   	

8. Give the header h1 padding-top: 20px;and text-align: center;

   header h1{
   	// Insert you code here
   }	
   	

9. Give the header h2 background-color: white;, padding: 20px; and margin: 0px;

   header h2{
   	// Insert you code here
   }	
   	

10. Give each nav a white background and change the border color to black.
11. Give the header a gray background and rounded top left and top right borders.
12. Show your instructor your final design.