Style 2 Instructions
This style illustrates a simple layout using a table cell with bgcolor
defined for a solid color.
Instructions
- Start off by defining a table with 2 cells and one row. This will give you two
columns, a sidebar column and your content column.
- The sidebar cell will have a NOWRAP attribute set this time, but no
width attribute. This lets the sidebar cell resize to fit the widest
text line. You will need to add <BR>'s as needed.
You can always make it wider by adding a few non-breaking spaces
( ) to the end of your longest menu item. Or you could insert
a dotclear image as we used in style 1.
- The sidebar cell also has the BGCOLOR attribute set to the color
you desire. You can set BGCOLOR in each cell if you like as for a nice
effect like that seen on Hortico's homepage.
- No spacer column is needed here since we use the main table's CELLSPACING
and/or CELLPADDING attributes to add some space between text and around cells.
- Now fill in your logo, sidebar links and text, and content and
you're good to go. (after testing of course)
See example 2a for the basic style 2 and
examples 2b and 2c
for some variants.
This style has several advantages:
- The sidebar is resizable to fit the text, regardless of the
font sizes set in the user's browser. Text won't be wrapped
strangely for some users but not others.
- Since it can be implemented completely in html without images,
it can be kept very small for quick loading.
- This design is easy to modify to use a sidebar on the right or
sidebars on both left and right.
|