Navigation tag using CSS
● Navigation is where all your buttons go.
✓ CSS Code✓ Body Tags✓ HTML tags
• This tutorial is fifth in a series:
Step #1: Create a Navigation id ~
✓ Open CSS Styles by and click on under the css panel …
✓ … add a new id rule called nav …
✓ … click OK.
Step #2: Set the Width & Height ~
✓ Click on Box & set the width to approximately 90% if you're going across the top, or a specific width if your going down the side …
✓ … set the Height of nav to approximately 50 pixels if across the top, approximately 400 px if down the side.
Step #3: Margin = Auto ~
✓ While you're there, set Margin to auto - that centers the div …
Step #4: Set a Color ~
✓ Choose another color from your Illustrator swatches by copying the HEX number …
✓ … click Background in your nav div …
✓ … and paste the number.
✓ Hit to view your work.
Step #5: Use "Split" View to Insert the NAV div
✓ Open your index page for this project …
✓ … click on Split to reveal the code (if necessary).
Step #6: Identify the Codes ~
✓ Notice you have 2 divs so far: container and header.
✓ Remember: Each div begins with an opening tag <div> and ends with closing tag: </div>
Step #7: Click in the Code Area ~
✓ Click after the end of the header div where you want your navigation to be:
Step #8: Clear some Space to Work ~
✓ Hit to clear some space to work in:
Step #9: Opening Tag ~
✓ In the open space, type< by hitting this key:
✓ Dreamweaver knows you are about to type some code and is trying to help you …
Step #10: d i v ~
✓ Then type:
✓ Watch Dreamweaver complete the code for you!
Step #11: Select the id Tag ~
✓ Now hit space and select id from the new set of code hints that shows up:
Step #12: Find your Tag ~
✓ Find the nav div:
Step #13: End the Tag ~
✓ End the tag by typing
Step #14: Type Something ~
✓ Type some text so you can see where your navigation goes …
Step #15: Close the Tag ~
✓ Then close the tag by typing < again and then / backslash.
✓ The completed tags look something like this:
Step #17: View your Work ~
✓ Hit F12 or select to view your work.
Last Step: Save and Attach ~
✓ Make sure your new styles.css document IN THE ROOT FOLDER OF YOUR NEW PROJECT, attach it and continue working …
Other Resources: http://codecamel.com/fullheight