Style 1 Instructions
This style illustrates a simple layout using a wide
background image and overlaying it with a table for positioning.
Note that the table and dotclear image borders
are set on in this example to illustrate the layout. You would, of
course, set them to 0 as in the example.
- Start your page by setting the background attribute of the BODY tag
to point to your background image.
<body bgcolor="#FFFFFF" background="gold.jpg">
- That image should have a short region to the left that is colored as you
want the background of your side bar. The image needs to be pretty wide
though since it will repeat both horizontally and vertically. If your image
isn't wide enough for a large browser window, you'll get sidebar colors
in undesired places. (like the current one on a 1152x864 screen)
See the images here
for some more examples.
- Next, define a table with 3 cells and one row. This will give you three
columns, a sidebar column, a spacer column, and your content column.
- When using a background image, you'll want to make the sidebar
and spacer column fixed widths. The widths will be determined
by the size of the sidebar-colored part of your background image.
You'll probably have to play with it a bit to get it just as you like.
Then the content are is set to resize as the browser window resizes.
- The sidebar and spacer columns will have dotclear images
(1-pixel clear gif image) inside to set their widths to fixed sizes.
You define the width attribute of the dotclear to stretch it to the
width you want to use for the column.
Don't rely on the <TD>'s width attribute, since most browsers will
override it as they try to layout the table. Putting an image in the
cell will make sure that the browser doesn't make that cell any smaller
than the image.
- The spacer column is then used to make sure the content isn't
too close to the sidebar image. Depending upon your image and
desired layout, you might be able to skip this and increase the
cellpadding or cellspacing attribute on your main table, but that
will add margins all around.
- The content cell is then set to width="100%" to help make sure
it takes up all the remaining width.
- Now fill in your logo, sidebar links and text, and content and
you're good to go. (after testing of course)
Notes and Suggestions