Layout and Positioning

Tools

HTML to PDF translator: Prince 8.0 download or online converter.

A sample page with various frame settings.

To validate your CSS files: http://jigsaw.w3.org/css-validator.

Lab 10/16-18/12

Renovating the HeadFirst Lounge (stage 2)

  1. Here is the code for chapter 11 from the (old) text's web site.
  2. Download and unzip this file in the My Documents directory on your work station.
  3. Double-click on the HFHTML_ch12.zip and extract it in place.
  4. Copy the resulting HFHTML_ch12 directory to the LABS directory on your thumbdrive.
  5. Rename that directory to Chapter11
  6. Convert the starbuzz.html in the starbuzz directory from XHTML to HTML5:
    1. The top line should be: <!doctype html>.
    2. The next should be: <html lang=en>.
    3. The fourth: <meta charset=utf-8> (make sure to save the file as utf-8).
    4. Change all occurrences of /> to >.
  7. In this page, move the sidebar <div> underneath the header. Edit starbuzz.css to float the sidebar <div> element to the right. Set the width of the sidebar and the margin of the main content to produce a two-column effect. Use the clear property to prevent the sidebar overlapping the footer.
  8. In the starbuzz/absolute directory, use absolute positioning to create a two-column effect. Adjust the styling of the footer so that it aligns with the main content of the page (ignoring the second column).
  9. Back in the starbuzz directory, Add the award image as indicated in the text. (Remember to set the z-index property.)
  10. Used fixed positioning, to display a coupon of the browser window (with a negative left property value).
  11. Use the validator, http://jigsaw.w3.org/css-validator, to check that your pages meets W3C standards.
  12. Edit the index.html file in your LABS directory to have links to both of your revised starbuzz.html pages.

Always turn off your computer and screen before leaving the room.