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:
Next, we'll build the navbar.