Patterned Left Margin with the Graphical Navigation
Buttons Near the Main Logo
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
If you are curious, I like the first page the best. It seems to
have the best balance of the three. Depending on your graphics,
the result might be very different.