Page Banner

Lesson Practice 7-1:
Using Layout & Positioning Properties


Practice 7 - Using Layout Properties

Task 1 - Using the Display Property

  1. Open the nocss.htm file in Notepad++.  Immediately Save the file in your CSS folder as layout1.htm (from your text folder)

  2. Open your ulist.htm file and copy the entire unordered list. Paste before the first h3 element in layout1.

  3. In the title element, add the title: Using The Display Property.

  4. Add an h2 header to the top of the page with the same text as in the title.

  5. Add an internal style sheet.

  6. Create and apply a class to center the h2 element.

  7. Create a class named .inline, setting the display property to inline.

  8. Apply the class to each list item.

  9. Move the enitre first h3 element to the beginning of the first paragraph, just inside the opening tag.

  10. Apply the inline class to the moved h3 element.

  11. Preview the file to see the effects. Trouble-shoot as needed.

  12. Save the file again.


Task 2 - Using Absolute Positioning

  1. Open a classes2.htm in Notepad++.  Immediately Save the file in your CSS folder as layout2.htm.

  2. In the title element, add the title: Using Absolute Positioning

  3. Add an h2 header to the top of the page with the same text as in the title.

  4. Create and apply a class to center the h2 element.

  5. To the red class, add declarations to make the position absolute, the top set at 50 pixels, and the width 250 pixels.

  6. To the white class, add declarations to make the position absolute, the top set at 50 pixels, the left set at 300 pixels and the width 250 pixels.

  7. To the blue class, add declarations to make the position absolute, the top set at 50 pixels, the left set at 600 pixels and the width 250 pixels.

  8. Preview the file to see the effects. You should see the three color block set in 'columns' on the page. Trouble-shoot as needed.

  9. Change the width of your preview window to see that the blocks do not change as the available page width changes. (The centered h2 element changes.)

  10. Note also that the lengths of the three blocks are different, because of the different amounts of content text.

  11. To each of the color classes, add a declaration to make the height 460 pixels.

  12. Preview again to see that the blocks are now the same height.

  13. Save the file again.


Task 3 - Using Percentage Block Positioning Within Absolute

  1. Reopen layout2.htm if needed in Notepad++.  Immediately Save the file in your CSS folder as layout3.htm.

  2. In the title element, add the title: Using Percentage Block Positioning Within Absolute

  3. Change the title heading to match the title element.

  4. Change each color class, change the top property value to 10% and the width property to 28%.

  5. In the red class, add set the left edge to be at 2%.

  6. In the white class, change the left edge to be 34%.

  7. In the blue class, change the left edge to be 66%.

  8. Preview the file to see the effects. Change the width of your preview window to see that the blocks now change as the available page width changes. if the window gets very narrow, the column lengths may not stay even as a block needs more room for its content. If any property does not work, trouble-shoot to fix it.

  9. Save the file again.


Task 4 - Using Relative Positioning of a Block Within a Block

  1. Reopen layout3.htm if needed in Notepad++.  Immediately Save the file in your CSS folder as layout4.htm.

  2. In the title element, add the title: Using Relative Positioning of a Block Within a Block

  3. Change the title heading to match the title element.

  4. Add a .redh3 class with declarations to set relative positioning, top and left side postitions at 10 pixels each.

  5. Apply the redh3 class to the h3 element within the red div.

  6. Preview the file to see the effects. Notice that the h3 element has been repositioned with 10 pixels of space above it and to its left, relative to where it was before within the division.

  7. Add a .whiteh3 class with declarations to set relative positioning, top and right side positions at 10 pixels each.

  8. Apply the whiteh3 class to the h3 element within the white div.

  9. Preview the file to see the effects. Notice that the h3 element has been repositioned with 10 pixels of space above it and to its right, relative to where it was before within the division.

  10. This position does not look good, so chnge the right positioning, to left position at 40 pixels.

  11. Preview to see the effect.

  12. Add a .blueh3 class with declarations to set relative positioning, top position at 10 pixels and left position at 80 pixels each.

  13. Apply the blueh3 class to the h3 element within the blue div.

  14. Preview, changing the width of your preview window to see how the heading blocks behave inside their div blocks. You will notice that the headings do not wrap nicely.

  15. Add a width declaration to each colorh3 class, setting the red width to 85%, the white width to 75% and the blue width to 65%.

  16. Preview to see the behavior now. If any property does not work, trouble-shoot to fix it.

  17. Save the file again.


Task 5 - Adding Layout Links to Your HTML Index Page

  1. Open your style sheet. Change the font size of the dt rule to 14pt, the font size of the regular and visited link rule to 9pt, and the font size of the link hover rule to 11pt. Save and close the style sheet.

  2. Open the index.htm file from your HTML Practice Site.

  3. Add CSS Layout as a new term in the list.

  4. Add the titles of the five Layout files as definitions.

  5. Link the titles to their appropriate files.

  6. Add an embedded style sheet.

  7. Create a rule for the dd class with a declaration to make them display inline.

  8. Add line breaks, only as needed, to control the flow of each section of links

  9. Preview to see the result; troubleshoot as needed.

  10. Test your links, save the file and publish the new files.

bonom bar