(Logo Here)
WebDevRes
Tutorial
· Style 1
· Example 1
· Style 2
· Example 2a
· Example 2b
· Example 2c
· Style 3
· Example 3
· Test Wrapping a a a a a a a a a a a a a a a
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.
Instructions
- 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
- You can use the source of Example #1 as a good starter page for this style.
- The background image used in this example is from Windy's Design Studio, Gallery, Plain Borders.