CSS-P Tutorial 11 -- Exercise Four

Michael Masumoto's Cosmic CSS-P Tutorial

Exercise Four: Laying Out a Nav Bar

Recreate the following Navigation Bar; the one necessary GIF is available from the "Download Exercise Files" links below:

Exercise 4 Screenshot

Hints

You will need one DIV box, 500px wide by 100px tall, colored #9999CC. That DIV box will have eight (8) child DIV tags, one for each instance of the "wreathSmall.gif" (four in all) and one for each text link (four in all).

The text-based links are positioned and formatted using the DIV tag, the P tag, and the A tag in the following manner:

<div id="link0">
<p><a href="#">Work</a></p>
</div>

The P tag should be formatted Arial/Helvetica/sans-serif, 20px, #000000.

The link pseudo-class should be color:#000000; and text-decoration:underline;
The visited pseudo-class should be color:#000033; and text-decoration:underline;
The active pseudo-class should be color:#660000; and text-decoration:underline;

The BODY tag's background color should be set to #CCCCFF.

The four wreath graphics should be positioned at:

The four links should be positioned in front of the wreath graphics at:

Work: 46,26
Play: 187,46
Boy: 322,26
Girl: 451,46

Download Exercise Files

Mac Files (.sit -- 2K)
PC Files (.zip -- 2K)

Download Solution

Mac Files (.sit -- 3K)
PC Files (.zip -- 3K)

Main Menu