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 11

Renovating the HeadFirst Lounge (stage 2)

  1. In your LABS directory, download and extract LAB11.zip. This will create a LAB11 directory with a starbuzz sub-directory. In that directory, there is a index.html file.
  2. 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.
  3. In the absolute directory, follow the directions in the text to use absolute positioning to create a two-column effect in its index.html file. Adjust the styling of the footer so that it aligns with the main content of the page (ignoring the second column).
  4. Back in the starbuzz directory, Add the award image as indicated in the text. (Remember to set the z-index property.)
  5. Used fixed positioning, to display a coupon of the browser window (with a negative left property value).

Manage Your Blog

  1. Wrap your table of contents in a div element with a unique id attribute value.
  2. Move that element to the top of your body element (if it isn't there already).
  3. Float the table of contents on the right.

More JavaScript

  1. Copy hello.html from LAB10 to a new LAB11 directory.
  2. Replace the value of the onclick attribute assignment in the opening p tag of the new hello.html page with:
    c l e a r I n t e r v a l ( t i m e r ) ;
  3. Save the file, open in a browser, and respond to requests for a name for a while. When you get bored, click on the Hello World text.
  4. Edit the index.html file in your LABS directory to have links to the new hello.html page and both of your revised index.html pages.

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