Lesson Practice 7-2 - Use CSS to
Create a Page Layout with Columns

In this practice, you will copy the basic HTML content for the site you see below right. Using CSS styling, you will create a column layout for the page, making it look like the illustration. The layout will first place the content and sidebar sectiions with their positions reversed. In the last exercise, you will switch them to the positions shown here. A larger image of the page, for better visibility, is shown at the bottom of the page.

The page consists of three main parts: the Header, the Main Content Section and the Sidebar. In the first exercise, after you copy the code, examine the code carefully, to locate and understand the three sections:

• Header - consists of a logo image at the left, text and a set of links on the bottom right. This will be located across the top of the page.
• Main Content Section - consists of a top area with the current feature story, and a larger area below containing past stories. This section will be in a column on the right, directly under the header and taking up about 2/3 of the page.
• Sidebar - consists of a list of links to upcoming events, and a Move of the Month illustration. This section is located in a column at the left under the header, taking up about 1/3 of the page.

You will use box properties to control the look of the sections, combination rules to control individual items within the sections, then use positioning properties to place the 'boxes' on the page.

You will also use comments liberally to keep track of the different sections and divisions in the coding.

Task 1 - Copy and set up the Footbag Freaks Page

1. Create a folder in your Lesson site named footbag. Create an images folder inside of the footbag folder.
   
   
2. footbagcode.doc Click on the link at the right to open the text file containing the
   HTML code for the Footbag Freaks site. Select and copy all the code.
   
   
3. Open a new file in Notepad++. Paste the code in the body of the page.
   
   
4. Save the file in the your footbag folder as footbaghome.htm.
   
   
5. Examine the content that is provided.
   You will notice three separate div sections, each with a comment identifying its beginning and ending (the green text after the closing divs) and comment 'lines' to visually divide the sections. You will also see many blank lines - this is space that is already provided for the elements that you will add.
   
   
6. Preview the page to see what is there.
   You will see the text for the page, without any images, styling or positioning.
   You will need to download additional content - the images needed - and they will be provided as needed, later in the exercises.
   
   
7. Add a div element to contain the entire body: place the opening div tag right after the opening body tag and place the closing div tag just before the closing body tag.
   
   
8. After the opening div tag that you just added, type the comment: <!-- begin wrapper -->
   After the closing div tag , type the following comment: <!-- end wrapper -->
   
   
   
9. Add a div element to contain the content area and the sidebar area. Place the opening tag of this new div element just before the div that begins the content section, with the comment <!-- begin main -->
   Place the closing tag of this new div element immediately after the closing div of the sidebar section, with the comment:
   <!-- end main -->
   
   
10. Save your file.

Task 2 - Create and Link the Style Sheet

This section creates the style sheet and sets the page defaults.

1. Right-click on the image at the right and copy it into the footbag images folder.
   
   
2. Begin a new blank Style Sheet file in HTML-Kit. Save it in your footbag folder as styles.css.
   
   
3. Add a body rule with margin and padding of 0, background color #050845, foreground color white, background image (using the bg.jpg file you just copied), background repeat should repeat along the x axis, font size small, and a font list including Arial, Helvetica, Veranda, and sans-serif. Save the style sheet.
   
   
4. Reopen the footbaghome.htm file, if necessary. Add the link element in the header, with the needed attributes, to connect to the external style sheet you just created.
   
   
5. Preview the file to see the background and font properties in effect. If any property does not seem to work, trouble-shoot to fix it.
   
   
6. Save the file again.

Task 3 - Styling the Wrapper Division

This division creates a background that appears around all three content sections.

1. Be sure both the footbaghome file and the style sheet are open.
   
   
2. To the style sheet, add a rule named .wrapper.
   
   
3. Add declarations to make the background color #fdf8f2, the foreground color black, the margins 30 pixels on the top and bottom, and 40 pixels on the left and right.
   
   
4. Apply the class to the wrapper division.
   
   
5. Save both files, then preview the page to see the effect.
   
   
6. The content text looks a little crowded against the top and left; add a declaration to the wrapper class to add 10 pixels of padding on all sides.
   
   
7. Save both files and preview again.

Task 4 - Styling the Header Division

This section contains the site logo and the main navigation links. It also has a light blue border above and below the site's tagline and navigation links.

1. Be sure both the index file and the style sheet are open. Copy the image at the right into the footbag images folder.
   
   
2. Insert the logo.gif image on a blank directly below the opening header div, and above the paragraph element. Add the alt text Footbag Freaks Logo.
   
   
3. Create a class named .logo with declarations to make the height 77 and width 203 pixels. Apply the logo class to the logo image.
   
   
4. To create the blue border above and below the tagline text and links, place a div element around the paragraph and unordered list.
   Place the comment <!-- begin header borders --> after the opening div tag and <!-- end header borders --> after the closing div tag.
   
   
5. Add a rule to the style sheet named .header-border with declarations to make the top and bottom borders 1 pixel, solid, color #b9d2e3 and height 1%.
   The last declaration is to overcome a CSS display 'bug' in earlier versions of Internet Explorer.
   
   
6. Add a rule named .tagline with declarations to make the font bold and italic, the background color #fdf8f2, and the foreground color #050845.
   
   
7. To style the link list as an line of links, add the following three classes:
   a rule with the combination selector .header-border ul , with margin and padding set to 0.
   a rule with the combination selector .header-border li, with a declaration to make the display inline and have the same background and foreground colors as the tagline class.
   a rule with the combination selector .header-border a:link, .header-border a:visited, with declarations to remove the underline, and have the same background and foreground colors as the tagline class.
   
   
8. Apply the header-border class to the header borders opening div tag. Add the tagline class to the paragraph in the header section.
   
   
9. Add a space, the | character and another space at the end of the text in the first three list items.
   
   
10. Save both files and preview the page.
    You will see that the tagline is above the links. It would be nice to have them in the same line, so you will do that next.
    
    
11. Add declarations to the tagline class to make all margins 0, the left padding 20 pixels, the width 300 pixels and float to the left.
    
    
12. Save the files and preview to see the difference.
    
    
13. To make the final adjustments to the link line, add declarations to the header-border ul class to make the right padding 30 pixels and the text align to the right.
    
    
14. Save again and preview the file to see changes to the links.
    
    
15. Copy the image at the right into the footbag images folder. In a blank line after closing ul tag, add the image header-ball.gif.
    
    
16. Create a class named .ball with height 24 and width 20 pixels, position absolute, top position 110 pixels and right position 55 pixels. Apply the ball class to the new image.
    
    
17. Save both files and preview the page to see the result.

Task 5 - Styling the Content Division

This section contains the main content area of the page. It will be located to the left of the sidebar, under the heading section. It has a current article feature at the top of the section, and a list of recent feature articles.

1. Be sure both the index file and the style sheet are open.
   
   
2. Create a rule named .main with a declaration to make the top margin 10 pixels.
   
   
3. Add a rule named .content with declarations to make the right margin 240 pixels, the border 1 pixel, solid and color #b9d2e3, the background color white and the foreground color black.
   
   
4. Apply the main class to the opening main div element, that surrounds the content and sidebar. Apply the content class to the content section opeining div element.
   
   
5. Style the main feature section at the top of the content division:
   
   1. To create the main feature section at the top of the content section, you will need another div element. Place an opening div tag immediately inside the content div opening tag, and add the comment <!-- begin main feature -->, then put a closing div tag just after the first paragraph containing the text "Read More", adding the comment
      <!-- end main feature -->
      
      
   2. Copy the image at the right into your footbag images folder.
      
      
   3. Create a rule named .main-feature with declarations to make the background image mainimg.jpg, no background repeat, background color #112236, foreground color white, 2 ems of padding on the top and right, 1 em of padding on the bottom and 200 pixels of padding on the left, and height of 1%.
      The last one is to again deal with the IE display bug.
      
      
   4. Apply the main-feature class to the div element you just created.
      
      
   5. Create the following two rules:
      a rule with the combination selector .main-feature h2, with declarations to make the margins 0, font weight normal and font size 140%
      a rule with the combination selector .main-feature p, with declarations to make the font size 110%
      
      
   6. To style the "Read More" link, create a rule named p.more with top margin of 0 and text right-aligned.
      
      
   7. Add the more class to the paragraph element that contains the text "Read More".
      
      
   8. Copy the button image at the right into your Lesson8 images folder.
      
      
   9. To style the specific link in "Read More" paragraph of the main section, create a rule with the combination selector .main-feature p.more a:link, .main-feature p.more a:visited with declarations to make the color white, background image more-bullet.gif, no background repeat, background position center left, and left padding of 14 pixels.
      
      
   10. Save the files and preview the page to see the effects.
       
       
6. Style t he recent feature section under the feature story in the content division:
   You will note that the list of four recent articles is an unordered list, but one containing other elements inside each list item. Again you will need to create combination selectors to style the elements.
   
   1. Add another div element to surround the recent articles list - add the opening div tag just before the h2 element containing the text "Recent Features", and the ending div tag just after the closing ul tag. Add comments to each to identify the section.
      
      
   2. Create a rule with the combination selector .recent-features with top and bottom margins 10 pixels, right margin 20 pixels and left margin 40 pixels.
      
      
   3. Add the recent features class to this new div element.
      
      
   4. Create a rule with the combination selector .recent-features h2 with color #245185, bottom padding 0.2 ems, bottom border 1 pixel, solid and color #b9d2e3, and font size 110%.
      
      
   5. Now, to remove the bullets from the list, create a rule with the name .features with margin and padding of 0 and list style of none. Apply the feature class to the unordered list.
      
      
   6. To style the h3 headings in each list item, create a rule with the combination selector .recent-features h3 with font size of 130% and color #245185.
      
      
   7. To style the paragraph text in each list item, create a rule with the combination selector .recent-features p with color #666666 and font size 90%.
      
      
   8. Apply the features class to the opening ul tag.
      
      
   9. Save the files and preview the page to see the effects.
      
      
7. Adding the author images:
   We want to display an image of the author alongside each feature article listing.
   
   1. Copy each of the images at the right into your footbag images folder.
      
      
   2. Add the image lachlan.jpg between the h3 and p elements in the first list item. Add alt text of Lachlan Donald.
      
      
   3. In the same manner, add the image of each author with their name as the alt text to each of the other three list items. (the images to use are: jules.jpg, mark.jpg and simon.jpg).
      
      
   4. To control the look of the images, create a rule with the combination selector li img with declarations to make them float left, have margin of 5 pixels on the right and bottom, and have a height of 48 and width of 35 pixels.
      
      
   5. Create a class named .author with font weight bold. Apply the class to each paragraph containing an author name.
      
      
8. To style the "Full Story" links:
   
   1. Add the more class to each "Full Story" link's paragraph element.
      
      
   2. Create a rule with the combination selector .features p.more a:link, .features p.more a:visited with declarations to make the background image more-bullet.gif, no background repeat, background position center left, left padding of 14 pixels, font size 90% and color #1e4c82.
      
      
9. Save both files and preview the page to see that the content section is now complete.

Task 6 - Styling the Sidebar Division

This section contains links to coming events, and the 'move of the month'. It will be located to the right of the main content section.

1. Be sure both the index file and the style sheet are open.
   
   
2. To move the content for the side bar to a position at the right side of the page, create a rule named .sidebar with declarations to make the position absolute, the top and right at 0, the width 220 pixels, the background color #256290, the foreground color white, and all margins and padding to 0. Apply the sidebar class to the sidebar division.
   
   
3. Save both files and preview the page.
   The sidebar is now stuck in the upper right corner of the page. This is because the sidebar element does not have a parent element with a positioning command.
   
   
4. The parent element of the sidebar is the main division, so to position the sidebar, we need to position the main division first. Locate the .main rule and add declarations to make the position relative, top and left at 0, and width 100%.
   
   
5. Save the files and preview to see that the section is now in place.
   
   
6. Copy the image at the right into your footbag images folder.
   
   
7. Create a rule for the .sidebar h3 combination that has font size of 110%, background image sidebar-header-bg.jpg, no background repeat, margin of 0, top and bottom padding of 0.2 ems, left padding of 10 pixels, and font weight normal.
   
   
8. Add a div element to contain the h3 element containing the text "Coming Events" through the end of the unordered list. Add comments to label the section as coming events.
   
   
9. Add another div element to contain the h3 element containing the text "Move of the Month" through the end of the paragraph with the text "more". Add comments to label the section as motm.
   
   
10. Create a rule named .inner with padding of 10 pixels. Add the inner class to the coming events and motm div elements.
    
    
11. Create a combination selector rule named .sidebar ul with list style image more-bullet.gif, left margin of 0 and left padding of 20 pixels.
    
    
12. Create a combination selector rule named .sidebar li with font size 90% and line height 1.4 ems.
    
    
13. Create a combination selector rule named .sidebar ul a:link, .sidebar ul a:visited with the color white.
    
    
14. Create a class rule named .date with font weight bold.
    
    
15. Add a span element around the date in each list item, and apply the date class to each.
    
    
16. Save the files and preview the page to see the effects.
    
    
17. Copy the image at the right into your footbag images folder. Add the image sidebar-player.gif just below the h4 element containing the text "The Outer Stall". Add the alt text player demonstrating the outer stall move.
    
    
18. Create a class named .motm-img with float to the right and right margin of 30 pixels, left margin of 20 pixels, height of 110 and width of 60 pixels. Apply the motm-img class to the new image.
    
    
19. Create a combination selector rule named .sidebar p.more a:link, sidebar p.more a:visited with declarations to make the background image more-bullet.gif, no background repeat, background position center left, left padding of 14 pixels and color white.
    
    
20. Apply the more class to the paragraph element containing the text "more".
    
    
21. Save the files and preview to see your finished page layout.

Task 7 - Reposition the Sidebar to the Left Side of the Page and Publish

1. Repostion the Sidebar:
   
   1. Be sure both the index file and the style sheet are open.
      
      
   2. Locate the .content rule and change the values for the margin to be 240 pixels on the left and 0 on the right.
      
      
   3. Locate the .sidebar rule and change the declaration of right at 0 to be left at 0.
      
      
   4. Save the style sheet and preview the page to see the change.
      
      
2. Add to your home page and publish:
   1. Open the index.htm file from your HTML Practice Site.
      
      
   2. Create a new row between the link cells and the footer row (contact webmaster). Span one cell over the two columns.
      
      
   3. Add a class to your mystyles style sheet to make the contents of the cell centered. Apply the new class to the new cell.
      
      
   4. Add a link to the Footbag Homepage file.
      
      
   5. Open your mystyles style sheet. Add appropriate classes to style the links in the last two cells as you wish.
      You will need to create and apply combination selectors to focus links to work only in those two cells.
      
      
   6. Preview to see the result, troubleshooting as needed.
      
      
   7. Test your link, save the file and publish the new files (the edited index page, and the footbag folder).

Your finished page should resemble the image below: