CSS Exercises, Part 3
Here are three final CSS design examples. See if you can duplicate these page designs yourself. Click on an image to view the page. Follow the link to the stylesheet to see how they were done. (Hint: all three use absolute positioning.)
First example: coordinating a long line and a narrow block of text. Both elements are DIVs, and both use absolute positioning. See the style sheet here.
Second example: juxtaposing two DIVs so that they overlap with a visible offset. Note the leftmost div (the dotted rectangle) contains no text, and serves only as a graphic element. See the style sheet here.
Third example: using two overlapping DIVs to create interlocking lines of text. Think of the DIVs as transparent sheets, laid one on top the other, and you'll understand how this one works. See the style sheet here.
|