This is a popular main page format you may have come across quite a bit. Basically, there is a patterned graphic on the left side of the page, with the navigation buttons located around the main logo graphic. Explore three variations on this theme as I play around with a new look for the consulting firm I work for.

The idea here is for a page that looks good on all popular graphical browsers- assuming 640x480 resolution, loads fast, is attractive to the eye, and conveys our message.

The thing that all of these pages have in common is a complex graphical pattern on the left side of the BACKGROUND image. The main trick in doing these pages was to use the TABLE tags so that I could prevent any text or graphic from ending up on top of the underlying graphic. Additionally, I also used my spacer.gif with its WIDTH the same as the table cell's width, just in case a browser came along that does not handle tables the same way as most now do. This will be clear in the example source codes.

The First Page contains the main logo to the left, with the navigation buttons stacked on the right of it. In the source code, see how I provide invisible space between the navigation buttons using the spacer.gif file.

The Second Page is identical to the first, except that the navigation buttons are stacked to the left of the logo graphic.

The Third Page has the navigation buttons under the main logo. The spacer.gif is utilized differently. Instead of providing vertical spacing, I am using it to provide both vertical and horizontal spacing. The effect is a staggered look that mimics the pattern in the left side of the BACKGROUND image.