Lesson 10

You want to prove to your client that you're worth the big bucks you're charging by creating an SEO-friendly page layout. That means you'll have to move the tags that define the navbar, left column, and right column down lower in the source code. Then, use absolute positioning to get them back up near the top where they currently appear using floats.

Unless you've customized layoutstyles.css on your own, the following measurements apply to the main layout elements in the page.

 
Major elements in clientlayout.htm

Major elements in clientlayout.htm


Based on those measurements, it's pretty easy to see where elements need to be positioned absolutely. Position the top-left corner of the leftcolumn and navbar divs and the top-right corner of the rightcolumn div, as shown below. Note that the width of the navbar will be 25em (45em for the entire wrapper minus 20em for the left and right columns).

 
Positioning elements in the client layout

Positioning elements in the client layout


To make this all work, you need to move the leftcolumn, rightcolumn, and navbar divs down to the bottom of the wrapper (below the closing tag for the footer but still within the wrapper div). Then, you need to modify the #wrapper, #leftcolumn, #rightcolumn, and #navbar style rules. (The wrapper div needs to be positioned relatively.)

The answers are below. But try not to peek.

Click here to view the answers.

 
Claudia's Results      Back to Studies Index