COURSE CALENDAR | WEEK 07 CLASS OUTLINE | Homework

  1. Review Class Projects in Progress- students will take note of what is missing, what needs improvement and what is required for a passing grade.
  2. An overview of CSS Positioning, Floats and review of the Box Model
  3. LAYOUT: Adding divs to the HTML and corresponding id selectors to the CSS
    • What is the div tag? DIV stands for Logical Division, or a generic block-level container with no predefined default style rules. Block boxes act as a containing block for any boxes within them.
    • What does an id selector do? ID selectors must be called on in the html document using the id attribute. However, a specific id can only be used once in a document. Your style sheet will contain an id selector using an # sign like this:

      • #content {
      margin-left: 65px;
      width: 460px;
      }

    • Your html will call on the id selector like this:

      <div id="content">
      <h2>Page Heading</h2>

      <p>Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content...</p>
      </div>

    • Take a minute to draw out your div layout on a piece of paper, like this.

  4. Change your resume page markup by adding the following divs. (example)
    1. USE COMMENTS TO KEEP TRACK OF YOUR DIVS!
    2. Wrap everything inside the body tags with <div id="wrapper>. Don't forget to close the div with </div>.

      <body>
      <div id="wrapper">

      <h1>Polly Waterford</h1>
      <h2>Resume</h2>

      ...

      <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="bio.html">Biography</a></li>
      <li><a href="resume.html">Resume</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="contact.html">Contact</a></li>
      </ul>

      </div>
      </body>

    3. Wrap your <h1> tag with <div id="header">

      4. <div id="header">
      <h1>Polly Waterford</h1>
      </div>

    4. Wrap your content with <div id="content"> starting with the <h2> and ending just before your profile links. Don't forget to close the div with </div>.

      <div id="content">
      <h2>Resume</h2>
      <h3>Objective / Summary</h3>
      <p>Graphic Designer with solid design and technical experience looking for a challenging position in the field of branding design.</p>

      ...

      </div>

    5. Wrap your profile links using <div id="sidebar">

      6. <div id="sidebar">
      <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="bio.html">Biography</a></li>
      <li><a href="resume.html">Resume</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="contact.html">Contact</a></li>
      </ul>
      </div>

    6. Lastly, move your copyright/email link to the bottom of the page, just below the sidebar. Wrap it with <div id="footer">

      <div id="footer">
      <p>&copy; Polly Waterford 2004 | <a href="mailto:pwaterford@yahoo.com">pwaterford@yahoo.com</a></p>
      </div>

  1. Add the following to your main stylesheet. Please note: these measurements can be adjusted to your layout.
    1. Use the CSS Selector button to add these id selectors to your style sheet: #wrapper, #header, #content, #sidebar and #footer
    2. For #wrapper: set box width to 767px, top / bottom margins to 0 and right / left margins to auto.
    3. For #header: set the background image to your header.gif and no repeat. Set box height to 126px.
      • Remove the background image and height from h1, but keep the -5000 text indent.
    4. For #content: set box width to 517px and float to left*
    5. For #sidebar: set box width to 250px and float to left*
    6. For #footer: set box height to 45px and clear to both.

      *If you'd like your sidebar to be on the right side, choose float: right.
  2. Adding margins and padding
    1. In order to avoid alignment problems in various browsers it helps to set your padding and/or margins in separate nested divs. Add the following to your code and style sheet to give breathing room around the content and sidebar text.

      Nest <div id="main-content"> inside <div id="content">

      <div id="content">
      <div id="main-content">
      <h2>Resume</h2>

      ...

      </div>
      </div>

    2. Add #main-content to your stylesheet and set margins to 20px.
    3. Nest <div id="sidebar-content"> inside <div id="sidebar">

      <div id="sidebar">
      <div id="sidebar-content">
      <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="bio.html">Biography</a></li>
      <li><a href="resume.html">Resume</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="contact.html">Contact</a></li>
      </ul>

      ...

      </div>
      </div>

    4. Add #sidebar-content to your stylesheet and set margins to 20px.
    5. Add #footer p to your stylesheet and set the padding to 1em.
  3. Update the other pages in your site
    1. Using your completed resume.html as a guide, update your index.html, bio.html, projects.html and contact.html by adding the div tags to all.

  4. EXTRAS FOR A BETTER GRADE!

    1. Bullets using list-style-image or background-image
    2. Replacing your h1 heading with an image
    3. If you want to get the sidebar's background color to extend all the way down the page, create a vertically titled background image and apply it to your wrapper. (see here)
    4. To remove the bullets from your sidebar navigation list, add a #sidebar-content ul li to your stylesheet and set list-style-type and list-style-image to none.

Homework| Week 7

Midterm Project is DUE Next Class!!!