NAVIGATION USING HTML TO SET UP THE BASIC STRUCTURE OF A NAV BAR

OPEN INDEX.HTML Lets review the code and view the page within the browser. Notice that this is a standard navigation, anchor tags are used to create the hyperlinks. A navigation bar needs standard HTML as a base. Just a tip, if you have not created the page, or do not know what the page name will be called, just simply place in “”. Ex: Rules

LETS EXPLORE THE NAV SECTION. By opening the style.css, you can noticed that the width right now is set to 960px, and height is set to 50px, with a background color added. Keep that in the back of your mind when designing a nav section. Since this website is a fixed size, we need to assure that we fit in that area.

ANCHOR TAGS Anchor tags are considered inline elements. They do not add any space above or below the content, as does with tags. If you look at the list of anchor tags, it essentially is a list! You really want to group the anchor tags together. So, you should wrap those anchor tags within a list. Semantically it makes sense. It would be possible to build it with paragraph tags, but a list makes better sense. With an addition of a list, it will provide other additional elements for CSS hooks and styling. Lists are widely used, eventually, a listless navigation area will be the norm, but as we speak it is the way to go! With this setup, you can add a nested list, and create interesting navigational area.

LETS ADD A LIST Home About Products Contact Rules

VIEW THE PAGE IN THE BROWSER It really does not look like a navigation bar. The list has the links going vertically, and we want it to go horizontally. Why? A list is a block element, it will force space above and below the list items. We need to remove the space that has been added, and make it «float» side by side. And need to remove the bullets. This is all done with CSS.

OPEN THE STYLE.CSS First, you need to remove the spacing that is added by adding the tag. You will also use list-style-type to remove the bullets. nav ul { margin:0; padding:0; list-style-type:none; } I encourage you to review the page every time you make adjustment to the style, to see the affect it has on the page.

HOW DO WE GET THE LIST ITEMS SIDE BY SIDE? First, you need to change the list item markers to an inline element. nav ul li { display: inline; } This will convert the block element to inline, and remove the space above and below the. This is where you have to have a good idea of inline vs block elements. Also note, there is no need to use float, if changing this to inline.

NOW IT IS TIME TO FOCUS IN ON THE We have now set up the list correctly, and remove all spacing. Now you need to change your attention to the anchor tag. This is where most of the formatting will be done! Right now, the links are side by side. Lets add some spacing, and need to make the text larger to be easier to read. We will force space between the links with adding margins to the left and right of the anchor tags.

NOW IT IS TIME TO FOCUS IN ON THE nav ul li a { margin-left: 15px; margin-right:15px; font-size: 18px; text-transform: uppercase; font-weight: bold; }

NOW IT IS TIME TO FOCUS IN ON THE By default, anchor tags will add an underline. Lets remove this underline with the text-decoration style rule. Add this to the existing style nav ul li a{} text-decoration: none; The color of the links are not matching with the color scheme, what could you do?

DID YOU THINK ABOUT THE PSEUDO CLASSES nav a:link { color: #FBF7F7; } nav a:visited { color: #818181; } nav a:hover { color: #FBF7F7; } nav a:active { color: #818181; } For this to work, you need to make sure that it is in the correct order. Link, visited, hover, active.

HOW CAN WE FORCE THE LINKS DOWN? By default the links are added to the top of the nav section. I need to force some space so the navigation is within the middle of the nav area. Remember the height of the nav section? It is 50px. Since I want the entire group to move down, I should apply a style to the tag, since it basically is the main grouping of the list of items. To do you will want to add some padding to the top to the nav ul style rule padding-top:15px; Place this right after padding:0;

LETS SWITCH GEARS, LETS CREATE A VERTICAL NAVIGATIONAL BAR Open vertical.html Review the HTML coding. Notice how the section is added within the main area of your page. Open vertical.css, and review the nav style. This page is set to have 3 columns. is the first column. To get the columns to fit side by side, a float:left is added. If you add the width of nav, #col2, and #col3, it should equal to 960px exact. This is the size set for the main div tag, which houses the 3 columns.

LETS ADD THE LIST! Home About Products Contact Rules

LETS REMOVE THE SPACING, JUST LIKE WE DID WITH THE HORIZONTAL BAR. nav ul { margin:0; padding:0; list-style-type:none; } We do not need to add the display:inline. We do want the items to appear on top of each other.

MOST OF THE TIME YOU WANT TO ADD BORDERS AND SPACING TO THE ANCHOR TAG. Anchor tags are inline elements. You cannot add a border to the anchor tags, or add spacing with the use of padding. You need to convert the tag to a block element by adding display:block nav ul li a { display:block; font-size: 18px; text-transform: uppercase; font-weight: bold; text-decoration: none; }

We just set the size of the font, and style. Also, the display:block was added to be able to add padding, margins, and borders to the anchor tag. To help separate the links, lets add some spacing, and borders to the style that was just created. You will also center align the text. padding-top: 15px; padding-bottom:15px; border-top:1px solid; border-bottom:1px solid; text-align:center;

Lets format the links with the pseudo classes nav a:link { color: #FBF7F7; } nav a:visited { color: #818181; } nav a:hover { color: #FBF7F7; } nav a:active { color: #818181; }