Making the Banner

Design goal: banner that stretches completely across the window at the top, with a logo at the left and a tag line at the right

If I put these two graphics in a table, and make the width of the table 100%, the banner will always fill the width of the window. I've designed the two graphics against a web-safe color, and made that color transparent. Most of the color in the banner won't come from a graphic, but by setting the background color of the table.

I start by making a 1-row, 2-column table:

I set the width of the table to 100%. Then, I add the two graphics:

The height of the table is established by the tallest element in it--the logo graphic--so I don't need to specify anything for table height. And I don't care how wide the columns are, so I don't set any cell widths. In the tag line graphic, I have included enough pixels on the right and below the text to position it where I want it when I establish alignment for the table cell it's in. Here is the same graphic with no transparency:

In many cases it's easier just to include extra pixels to get this kind of positioning. If I had cropped the graphic to include only the letters, I'd have to make a more complex table structure to position it where I want it.

When I set the cell's horizontal alignment to "right" and its vertical alignment to "bottom", the banner looks like:

Finally, I give the banner table the background color, eliminate its border, and set its cell pad and cell space to zero:

See the banner

Next, we'll build the navbar.