NASA Logo, National Aeronautics and Space Administration

National Aeronautics and Space Administration

Goddard Space Flight Center

One NASA Look and Feel, Web Standards to the rescue.

Web Standards to the rescue. One NASA Look and Feel CSS TEMPLATES

Building Your Site

Modifying the Nav Bar

Modifying the navigation bar requires a little bit of math and some tweaking to create a balanced look. You will better understand this process if you have some knowledge of the "CSS Box Model", but it is not necessary.

Let's change the HTML first

Open up one of the template .htm files (if you are using the PHP or the Server Side Includes package, you will want to open the file named "/includes/main_menu.htm"). Find the portion of code that begins the nav bar. it will look like this:

HTML Example:

<div id="menu"><ul><li id="one">

Notice that it's just a simple list with text surrounded by anchor and span tags. Each list item has an "id" attribute. The "id" attributes let us target and tweak each item individually.

Making the calculations and altering the stylesheet

The total width of the nav bar is 730 pixels. Our goal is to split it into equal parts, and then tweak the widths of the parts to account for differences in each item.

What we need to do first is decide how many nav items we will have. I'll use the nav bar I created on this site for my example so you will have a visual reference. Therefore, we'll be working with a four-item nav bar.

Next, we need to get the proper width in pixels of each item. To do this, we need to take into account the one pixel white bar separating them. A four-item nav bar has three separators; so we subtract three from 730 and then divide that by four, leaving us with 181 rounded down.

Quick Equation:

item_width = (nav_width – number_of_separators) / number_of_nav_items

Now we will use this width (181) to control the items in the stylesheet Open the file named style.css, which should be located in your /css/ directory. This file is the main stylesheet for the site. There are other stylesheets in the directory with names that pretty much explain what they are used for, but you shouldn't have to edit them. Browse the stylesheet until you find the rules that apply to the items of your nav bar. They will look like this:

CSS Example:

#menu ul li#one a { width:181px;}
#menu ul li#two a { width:191px;}
#menu ul li#three a { width:212px;}
#menu ul li#four a { border-right:0; width:143px;}

The items in the above example have already been tweaked to fit my specific nav bar. You will want to replace my widths with the calculation you made earlier. This will create a nice evenly spaced nav bar.

But you can't stop there. You will need move some pixels around if the names of your items do not fit nicely. To do this, just subtract some pixels from one item and add the same number to a different one. The important thing is to remember is that the total width of these items, plus the separators, must equal 730.

A closer look at the stylesheet

Where to change the widths is pretty obvious. But you're probably wondering how each line knows which list item in the HTML to pointing to. The answer is in the "id" from the HTML page. I have given them numerical names. However, I could have easily given them any other name, just as long as I changed the stylesheet to reflect the new names.

If the "id" names in the HTML had been (alpha, beta, capa, delta), the css code would look like this:

CSS Example:

#menu ul li#alpha a { width:181px;}
#menu ul li#beta a { width:191px;}
#menu ul li#capa a { width:212px;}
#menu ul li#delta a { border-right:0; width:143px;}

How to increase the number of items in the nav bar

If you have more than four items in your nav bar all you need to do is add the necessary list items in the HTML, and add the new lines in the CSS to control them. Don't forget to give your new item an "id", and use that same id name in the CSS. The "id" name you give it MUST BE unique on that page. You can not have two "id"s with the same name on any HTML page.

One more thing...

You probably already noticed that the fourth item in the example contains border-right:0;. If you change the number of items, you must move that line of code to the item that appears last on your nav bar. The reason for this is that every list item in the menu receives a one pixel border on the right by default. We don't want the last item in our list to have one. So we turn it off. Working from the above example, if we had five items it would appear like this:

CSS Example:

#menu ul li#alpha a { width:145px;}
#menu ul li#beta a { width:145px;}
#menu ul li#capa a { width:145px;}
#menu ul li#delta a { width:145px;}
#menu ul li#epsilon a { border-right:0; width:145px;}

I encourage you to stay with the numerical names as they're easier to follow.

The hard part is over. Lets create pages and insert content.

+ Home

Building Your Site

NASA Fact

Insert a NASA fact here. Feel free to use a server side include or a back-end rotater.

NASA logo