COM271—Task 4

CSS Positioning
Given 10/2 | Due 10/9

Syllabus | Table of Pages | Assignments | References and Useful Links

Purpose In this assignment, you will add an external print style sheets and we will remove any html tables used for positioning, introducing positioned divs for banner, navigation, and main content.

Preparation: Complete Meyer Projects 8 and 9: "Creating an On-line Greeting Card" and "Multicolumn Layout" before attempting this task.

Eliminating Tables for Layout

If we are to hold with the W3C philosophy of separating layout from structure, it is time to eliminate tables and table elements that are used for positioning. In this exercise, we turn to positioned divs for layout, realizing several advantages from the effort.

  1. Structure: Begin with the CSS-styled resume page from the previous assignment. This page has a resume with CSS styling, and an external file for a menu, also styled with CSS.
    Save this page as a new page, CSS_positioning.shtml. The .shtml file extension permits us to keep using the external navigation menu, brought to the page through a server-side include.
    You are going to strip away the outer table, the one with cells containing a banner, navigation, and content. Remove these now, taking care to remove all table, tr, and td elements. Be careful to not touch the inner table which contains the resume; because the resume has logical rows and columns, we will hold on to its structures without any changes.
    Now, add new elements:
    • Around the include for navigation, add a div
      <div id="nav">
      <!--#include file="ssi/nav.ssi" -->
      </div><!--nav-->
    • Similarly, surround your banner header (h1 element?) and logo (image) with a div banner
      <div id="banner">, etc. (be sure to close the div!)
    • and do the same around content (the resume table)
      <div id="contents">, etc.
  2. CSS: Because we are going to also use the following styles on our index page and on future additions, open the external style sheet for screen media (css/screen.css, or what ever you are using for your external style sheet). Add the following:
    • Position the banner:
      div#banner{position:absolute;top:15px;left:15px;width:1200px;height:100px;}
    • Position the navigation, below and on the left:
      div#nav{position:absolute;top:115px;left:15px;width:120px;}
    • Finally, position the contents div, beneath the banner and to the right of the navigation:
      div#contents{position:absolute;top:115px;left:135px;width:1065px;}
      You should take it from here, adding any background colors, borders, padding, etc., to the divs themselves. If you had styles that were descendents of table elements (e.g., td#nav a{...}) recreate them as descendents of divs (div#nav a{...}). You may have to adjust positioning as you adjust widths of the divs (need more width for navigation? content will need a higher left offset to move it over, etc.).
  3. Extending to the home page: Make the same structural changes on your home page (index.shtml); i.e., replace the positioning table with positioned divs. The external style sheet should position and style the main divs (banner, nav, and content). If you want any style of these divs to vary from the external style, add rules to the home page; the cascade should allow these rules to overrule the external file.
  4. Update the navigation: Don't forget to add a link to the new page ("CSS Positioning") to the external navigation file so that all pages on the site can now reach this new page.

    5. That's it! Congratulations. Your training wheels are off (no more tables for layout)! You are now a real css based web developer!