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

Get Adobe Flash player


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.


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: