Eric Meyer

on CSS

cover image
Available now!

Positioning a Better Design

Project 11

preview image 1 preview image 2 preview image 3
Project files
Project 11 ZIP file Project 11 StuffIt file

We've been using tables for years now, warping them into ever more complicated arrangements just to get interesting visual effects. The classic approach of nesting tables within tables and slicing up images to be slotted into various cells of a complex table was all we had. The thought might occur from time to time that this was no way to run a railroad, but since there were no other tracks, we followed them-- more or less blindly.

Happily, this is no longer true. CSS positioning offers a much more sane alternative to table-based layouts-- or it would if browsers acted in a consistent fashion. Despite these hurdles, there is still plenty we can do that doesn't trip across browser bugs. The result is a much cleaner way to design and a lot less image slicing.

Project 11 demonstrates a more complicated design based on positioning, and directly addresses ways to work around browser bugs such that the display is consistent between browsers. Readers learn not only more advanced positioning concepts, but what to use and what to avoid in their own designs.

Errata

Page 239

The second line of the first code block on the page should read: 

<title>Pretentious Web Studios</title>
Page 243

The first code block on the page is missing a close-bracket. The last two lines of the code block should read: 

   margin: 0; padding: 0.125em 0.25em;}
</style>

The error does not appear in the project files.

Page 243

The last code block on the page has an extra and incorrect close-bracket at the end of the second-to-last line. The last two lines of the code block should read: 

  font-style: italic; letter-spacing: 0.25em;
  font-size: 200%; line-height: 1.25em;}

The error does not appear in the project files.

Page 243

The inherited line-height value is 1.5, not 1.4.

Pages 248 - 250

In the code blocks on all three pages, the declaration top: 12em; should be top: 11em;.

Page 251

There is an incorrect value of 23px in the first code block. The first three lines of the code block should read: 

a#rp {position: absolute; z-index: 5;
  top: 10em; right: 10px;
  border-width: 0;}

The error does not appear in the project files.

Page 252

The div#menu rule should read: 

div#menu {position: absolute; z-index: 7;
  width: 7em; top: 200px; right: 0;}