Web Design
CSS Exercise 2: Centered Layout Part II

Multiple Wrappers

Focus on:

• Centered layout using div tag and auto margins
• Using class selector
• using id selector
• using element selector on unique tags only
• CSS box properties: padding, border, margin
• CSS background property: background-color
• CSS width property
• embedded style sheet
• use validators to check and correct work:
  • HTML validator
  • CSS validator

Overview

You have two pages: dogs and UWM. You will use embedded styles, and will use id, class and element selectors. It is important to look at the markup and see which tags have ids, so you can use id selectors for those. Tags which are UNIQUE will use element selectors for styling. Use any colors you like. Later, you'll use a class selector for your multiple wrappers.

Workflow

Study the screenshots. You can see that the background colors for different semantic structural tags extend all the way to the edges of the viewport, but the text within them is is delimited by an invisible fixed-width centered live space. Where you see different colors or a border is where your multiple wrappers go.

Dogs Page

1. Put background colors in the body and all the HTML5 semantic structural tags. You'll have some extra background colors that you'll delete later. Use ID selectors where there is an id in the markup. Use element selectors for the unique tags in the page (there are always 2!)
2. Put padding in the HTML5 semantic structural tags where it is needed to "uncollapse" the default margins in the heading tags, paragraphs and lists. Most have the same padding on all four sides, but on dogs, the banner only has padding on the top. 10px of padding is appropriate.
3. Zero out margins on the body.
4. Decide where your wrappers will go. The screenshot shows you where either color or border extends all the way to the edge of the viewport. Each div tag that is needed to delimit the live space goes INSIDE the structural tag that has the extended background color or border. You'll use class="wrapper" in the opening div tag for each wrapper.
5. Once your wrappers are in place, write the class style for the wrapper. It will apply to all the instances of class="wrapper" in your markup. The live space is 900px wide.
6. Add the border to the structural element that needs it.
7. Delete the background-color styles where they are not needed; be sure you do not have any extra background colors. Dogs page has 3.

UWM Page

1. Put background colors in the body and all the HTML5 semantic structural tags. You'll have some extra background colors that you'll delete later. Use ID selectors where there is an id in the markup. Use element selectors for the unique tags in the page (there are always 2!)
2. Put padding in the HTML5 semantic structural tags where it is needed to "uncollapse" the default margins in the heading tags, paragraphs and lists. 10px of padding is appropriate. Put the same padding on all 4 sides of each box.
3. Zero out margins on the body.
4. Decide where your wrappers will go. The screenshot shows you where color extends all the way to the edge of the viewport. Each div tag that is needed to delimit the live space goes INSIDE the structural tag that has the extended background color or border. You'll use class="wrapper" in the opening div tag for each wrapper.
5. Once your wrappers are in place, write the class style for the wrapper. It will apply to all the instances of class="wrapper" in your markup. The live space is 900px wide.
6. Delete the background-color styles where they are not needed; be sure you do not have any extra background colors. UWM page has 3. Some are in different elements than the dogs page.

Hints

You have put a background color in the body. Remember that all elements default to "no" background color except the body. You can use the body's color in useful ways for your layouts. You do NOT need to put the same background color in, say, the colophon as the body. If they're the same, don't put a background color in the colophon.

Also, in the screenshots, NONE of the background colors you see are in the main. You'll always put your wrappers on the outside of the main, for reasons that will become clear when we do multi-column 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.