Web Design
CSS Exercise 2: Centered Layout Part I

CSS "Box Properties" with layout

Focus on:

Overview

Use the padding, border, margin, background-color properties to style two versions of Denise Moore's resume. Resume 1 is marked up like we did it using nested unordered lists. Resume 2 is marked up using sections (something we did not do).

The intention here is to show two valid ways to mark up this resume semantically, and showcase the differences when it comes to styling. Markup as list works best for a more traditional page look to the resume, and markup as sections allows for a more graphic display of the resume.

Workflow

You do not need to add any markup to the documents other than the style tag for the embedded style sheets and the div tag, with id attribute for the centered layout. Write styles using one id selector per page. The rest of the selectors will be element selectors.

I recommend beginning work with the "big picture" styles (create centered layout, put in background colors, then work on details). Don't work on adjusting heading tag margins until you have finished the big things.

Read each of the separate page instructions carefully. They tell you pretty much exactly what to do.

List resume

Colors you will need. It should be clear from the screenshot which styles need these colors:

Workflow for layout:

  1. Add the div tag to the markup in the proper location, give it the id of "wrapper", and write the styles to center your layout. The live space is 800px (fairly narrow, but the resume reads better with a narrower live space since it is text heavy)*
  2. Put the proper background colors into styles for the body and for the #wrapper.
  3. You need padding on the wrapper. The top, left and right sides of the wrapper have the same padding, and the bottom has more. Look at the screenshot to determine with amount of padding you need; the left side and the bottom will help you make these decisions.
  4. You need to zero out the margins on the body. That way the top and bottom of the wrapper will extend to the top and bottom of the viewport with no offset.
  5. You need a 1px border on the left side of the wrapper only. It is dotted. You should be able to figure out what color it is from the screenshot.
  6. remove the padding, margin and bullets from the unordered lists.

Workflow for adjusting heading tag margins. Remember that by default, vertical margins "collapse" so they don't double up. There are a lot of margins here in the heading tags and the lists. These steps should help you figure out how to best adjust this:

  1. zero out the top margin for the h1 tag.
  2. The h1 and h2 tags need to be adjusted to have the same bottom margin. I used 12px.
  3. The h3 tag needs different margins so that the text in the resume forms hierarchical groupings visually (through proximity and isolation). I put 12px on the top (it matches the bottom margin of h1 and h2), and 6px on the bottom, so the text below the h3 is closer to it and forms a grouping.
  4. note: I used fixed pixels for these adjustments to the heading tags, even though the default margin is not fixed, but rather a proportion of the size of the type (relative to the size of the type). This is because I wanted the margins the same as each other irrespective of the size of the type in the headings. If I used a relative unit of measurement, the margin amounts would have been relative to the different heading sizes and not the same margin for all different heading sizes.
  5. There is a border on the bottom of the h2. It is the same as the wrapper border in size, style and color.

Sections resume

Colors you will need. It should be clear from the screenshot which styles need these colors:

Workflow for layout:

  1. Add the div tag to the markup in the proper location, give it the id of "wrapper", and write the styles to center your layout. The live space is 800px (fairly narrow, but the resume reads better with a narrower live space since it is text heavy)
  2. Put the proper background color into styles for the body, for the header and for the sections
  3. Zero out the margin on the body.
  4. The #wrapper has no padding on the left and right (we don't see it in the layout except as a delimiter of the live space), but has the same padding on the top and bottom. Experiment with pixel amounts to match the screen shot. Even though you don't "see" the wrapper, you will see the interval at the top and bottom of the layout, that shows the background color of the body.
  5. The header and the sections have the same padding as each other. The padding is the same on all four sides of the box. Experiment with the padding amount in pixels to get the correct value (use the left edge to evaluate the interval since it is consistent).
  6. Ha, your intervals between the header and the sections all disappeared! That is because they became "boxy" and the margin in the heading tags is no longer collapsing and is no longer calculated from the margin above. You need to add those intervals back. The most efficient way is to consider where you need the spaces and "think efficiently." You don't need margin on tops and bottoms, just on one or the other. The easiest way is to put margin on the top of all the sections. Use the screenshot to figure out how much margin there is.
  7. The header and the sections all need a bottom border. The header border is thicker than the section border, but they are the same color. Use the screen shot to refine the border size and select the proper color.

Workflow for adjusting heading tag margins. Remember that by default, vertical margins "collapse" so they don't double up. Because this resume is broken up into visual blocks, the heading margins don't need as much adjustment. Follow these guidelines:

  1. Zero out the top margins on the h1 and h2.
  2. The bottom margins on h1 and h2 are fine.
  3. The top margin on the h3 is fine, but adjust the bottom margin so that it is 6px.

* About the total width of your live space

In both layouts, the width of your wrapper is set at 800px. However, in the lists markup, the total width of the live space is larger than 800px. Why? Because padding has been added to both the left and right sides of the wrapper, and border to the left side.

Important note: when you set the width of an element that generates a block display box, the total width of that element is the width you set, plus any padding or border on the left and right sides of the box.

We added padding to the left and right, and a border to the left. All those measurements get added to the 800px width to calculate the final total width of the #wrapper.

See the live space screenshot to see a comparison of the two layouts.

Validation

You want to be sure you've written valid markup and valid styles. Use the online validator tools to check your work. If there are errors, read what the validator says about them and check the lines in your markup where the errors occur.