Part 3: The Top Nav

• ✔ The top nav list should be placed between the header and content divs.
• ✔ 1 - Open the h1_simple.html file from the listamatic folder. Switch to Code View and copy the unordered list.
• ✔ 2 - Back in your coffeeco index.html file, insert your cursor before the "content" div and hit return to create an empty space.
• ✔ With your cursor planted in the empty space between the header and content divs, Edit > Paste the unordered list.
• ✔ 3 - Now that the list is place, switch back to Design View. Select "Link one" and type "Home". Then, select "Home" and enter "index.html" into the Link field in the Property inspector.
  • ✔ Repeat for the following links, changing the link name, then adding the URL, referencing the table below.
  • ✔ When you complete Link 4 (music), hit Return to create a new list item for "retro", then hit Return again to create another list item for "about us".
• ✔ home >> index.html
• ✔ cartoons >> cartoons.html
• ✔ tv shows >> tv.html
• ✔ music >> music.html
• ✔ retro >> retro.html
• ✔ about us >> about.html
• ✔ 4 - Switch to Code View to make sure the list is formatted correctly. The code should look like this:
• ✔ 5 - Open the h1_simple.css file from the listamatic folder.
• ✔ Select the list styles, and Edit > Copy.
• ✔ Open the coffee.css file and scroll down. Insert your cursor at the bottom of the page and Edit > Paste.
• ✔ 6 - Switch back to the coffeeco index.html page. The top nav is formatted as a horizontal list, but we need to edit some of the properties, starting with ul.nav.
• ✔ Background category
  • ✔ Background-image: Browse to select a navBG graphic in the images_nav folder. There are four colors to choose from: black, blue, red or violet.
  • ✔ Background-repeat: Set to "no-repeat".
• ✔ Box category
  • ✔ Height: Set the height to "44px", the height of the navBG graphic.
• ✔ The next rule is ul.nav li, the list items.
• ✔ Box category
  • ✔ Padding: Change the right padding to "30px", for a little extra space between the links.
• ✔ Next: ul.nav a, ul.nav a:visited, the links.
• ✔ Type category
  • ✔ Font-family: The default font-family is set to sans-serif, choose a different font stack if you like.
  • ✔ Font-size: Choose a font size. Make sure that the links are large enough to stand out, but small enough to fit the nav bar.
  • ✔ Line-height: Set the line-height to about "40px". This will center the links vertically on the nav bar. If necessary, adjust this value until the alignment looks good to you.
  • ✔ Font-weight: Try out the different font weights. A bold weight will give the links a little extra oomph.
  • ✔ Text-transform: If you like all-caps, change the casing to "uppercase". For a more casual style, use "lowercase".
  • ✔ Color: Choose a link color.
  • ✔ Text-decoration: Set to "none" to remove the link underlines.
• ✔ Block category
  • ✔ Letter-spacing: If the links seem crowded, it might be nice to add a tiny bit of letter-spacing, just "1px" should do the trick.
• ✔ And finally: ul.nav a:hover, ul.nav a:active, ul.nav a:focus, the link hovers.
• ✔ Type category
  • ✔ Color: Choose a contrasting hover color.
• ✔ That should finish up the nav bar—preview in Live View to see how it looks.