 |
 |
 |
 |
Dear Diary,
Ever been to Nawlins and strolled down Bourbon Street at night with a drink in your hand? Not a sissy drink like straight Bourbon or Scotch, but a real Bourbon Street strollin’ drink like a Hurricane or a Hand Grenade?
Ever feed aligators in the bayou or visit a voodoo temple?
Design notes:
The background image is a 1200 x 1000 pixel
JPEG, and weighs 15K.
The background image does not include the circular navigation elements. The circular nav elements are floating on top of the background image, placed in table cells that have been planned to align perfectly with the background image. This perfect alignment of the page table cell is made possible by setting the alignment settings in the BODY tag to “0” (zero):
leftmargin="0" topmargin="0"
marginwidth="0" marginheight="0"
Most of the table cells contain a transparent GIF file that has been sized to fill each table cell. This allows the background image to show through the table and maintain the shape and size of the empty cells (empty except for the transparent GIF).
As we added text to this section of design notes, this table cell and the table cells to the right began stretching down the page, creating unwanted space between the circular nav elements. We deleted the circular nav elements from their individual cells, merged the four cells into one cell and placed (nested) a one-column, four-row table into the newly merged cell. We then replaced each nav graphic into each of the four cells of the nested table. We made sure that the cell in which the table was nested had been set to have a vertical alignment of “Top” so that when the original table cell stretched deeper, the nested table would remain at the top of the stretched tabel cell.
As you can see, the repeating background image will become visible again if the page content falls deep enough. This is not necessarily a problem, although it is something that we usually avoid by shortening the content or by not using large background images.
Fonts
Headline: Courier New
Text under circles: MiniHaHa Bold
Numbers in circles: Bodega Medium