Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary:

Navigation tag using CSS

    ●  Navigation is where all your buttons go.


Learn About:

CSS Code Body Tags HTML tags

  •   If you've been following this series of tutorials, you have created a CSS document with body, html, container, and header tags, and maybe some sort of background image or color.


   •   This tutorial is fifth in a series:

1 - Body    2 - HTML    3 - Containter  4 - Header    5 - Nav     6 - Content   7 - Footer  

Step #1: Create a Navigation id ~

Hopefully you've done this tutorial first: 15 - CSS Header div


Open CSS Styles by and click on plus under the css panel …

new rule 2

… add a new id rule called nav …

nav tag

… 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.

50 pixels


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 hit enter 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

end tag


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:

completed tags


Step #17: View your Work ~

Hit F12 or select small to view your work.

preview


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 …

new styles sheet


Other Resources: http://codecamel.com/fullheight