Navigation using List tags in CSS
● Create navigation with Rollover Effects using ONLY code and NO images.
✓ Null Links ✓ CSS Navigation Links✓ Hover Links
This tutorial is first in a series:
Other People's Work:
Here are examples of work inspired by this tutorial.
Step #1: Open your Page in Dreamweaver ~
✓ Click inside the nav div …
✓ … and type your links:
Step #2: Make the Links Active ~
✓ Highlight one of text links …
✓ … and open the Properties menu by going to: Window > Properties or hitting the keybord shortcut: Cmd(⌘)+F3, and put # sign under Link.
✓ Now the text is a link …
✓ Do this to each link.
✓ These links are just placeholders - they don't go anywhere yet.
Step #3: The Unordered List Tag ~
✓ Highlight all the Links …
✓ … and go to: Format > List > Unordered List
✓ Now your links have a bullet point.
Step #4: Create a New CSS Rule ~
✓ Create a new CSS rule …
✓ … and erase what's there and replace it with #nav ul
✓ Hit OK.
Step #5: Get rid of the bullets in #nav ul ~
✓ Next, click List …
✓ … and set type to none.
✓ Hit OK and save your work.
Step #6: Check the Results of your changes to #nav ul ~
✓ List type = None removes the bullets.
Step #7: text-align: Center in #nav ul ~
✓ Double-Click on #nav ul and open it
✓ Click on Block and set Text-align: center
✓ Hit OK and save your work.
Step #8: Check the Results of your changes to #nav ul ~
✓ Now your text is centered.
Step #9: ANOTHER New Tag #nav ul li ~
✓ Make another New CSS Rule
✓ Call it #nav ul li
✓ Don't forget the #
✓ Click Block and select Display = inline
✓ Click Ok and notice the links are now lined up …
Step #10: New Tag called #nav ul li a ~
✓ You probably don't want underlines in your links.
✓ Make another new rule called #nav ul li a
✓ Click Type and select Decoration = none
✓ Press OK and watch the underlines disappear.
Step #11: Padding #nav ul li a ~
✓ Open up the Properties menu (if necessary) …
✓ Select #nav ul li a:hover and click Add Property …
✓ Set padding to .1em 1em
✓ Padding refers to the space between the content and the edge:
✓ These settings are only examples. Do your own thing. Try something new!.
Step #12: #nav ul li a:hover ~
✓ Create one more new rule called #nav ul li a:hover
✓ Under Background, choose another color from your Kuler Color selection by copying the HEX number from your Swatches in Illustrator that you were supposed to create during this tutorial - (If you don't have your swatch colors yet - get them now) …
✓ … and type the hex number from your color scheme in the background.
Step #13: Save and View your Work … ~
✓ Hit to view your work.
Last Step: Save and Upload your site ~
✓ If you have a web server, save your pages, upload them and attach the link.
✓ Continue with the nav text shadows on your buttons tutorial only if you are ready …
Other Resources: http://css.maxdesign.com.au/listutorial/horizontal01.htm