Making the Navbar

Design goal: main navigation bar below the banner that covers the width of the content area

I want the next page element--the main navigation bar--to have the same general behavior, but instead of spanning the entire window, I want the buttons to stretch across only the content area. As with the banner, I start by making a 1-row, 2-column table:

I have a small graphic to fill the space under the logo to prevent the navigation bar from moving into that area, so I put it into the left cell:

All but one of the rows of pixels in this graphic are transparent, so I can use a background color to fill in most of the area:

I want this cell to be only as wide as this graphic. I've sized the graphic to be exactly the same width as the logo in the banner above it. Now I need a way to make the right cell expand to fill all of the remaining width of the table. This is where the buttons for the navigation bar will go. I'll use what I call a "balloon" cell. I select the right cell and set its width to 100%:

< "balloon" cell >

The "balloon" cell forces itself to be as wide as it can be inside its table. The only thing that stops it from expanding any more is the graphic in the left cell. This cell will be the outer container for the navigation bar. Since it will always be as wide as possible, if I make another table inside it, and set its width to 100%, the inner table will always expand to the width of the "balloon" cell.

To make the navigation bar itself, I make a 1-row, 4-column table:

and insert my button graphics:

I want to make sure that as the navigation bar expands and contracts the buttons will be in the center of their cells. So I add center horizontal alignment to each cell:

I've made the buttons wider than the words to establish a minimum spacing between them if the window gets very narrow. Now, to fill the gaps between the buttons, I'll add a table background, and set cell space, cell pad and table border to zero:

Now I put this navigation bar table into my outer table:

and set the cell pad, cell space and table border to zero:

See the navbar

Next, we'll build the side navigation panel.