How do you ... do a border background?
How do you make a side bar color (or image) then have my main contents in other area?

This has a couple of possible answers. The first possibility is to use frames. Two columns with the BORDER property set to zero. The first column used for navigation with the BGCOLOR or BACKGROUND properties being specified. To learn more on creating and using frames, click on the HTML link in our navigation area to the left.

The next possibiltiy is to use a table layout. One large table of one row, two columns. Now your main layout plans will decide how you are going to make this happen. If you want to just have that specific section having the color or background image, then the property will go into the TD tag such as :

<table width="100%"><tr><td bgcolor="#0000ff" valign="top" width="150">
navigation stuff here.
</td><td valign="top">
main contents here.

For the following examples, please view the source code of the appearing pages to have a good look at how the effect was done.

An example of using a color for a table cell background, click here.

An example of using a background image for a table cell, click here.

That was just a simple color section. You may use a BACKGROUND instead for that type of effect.

If you are looking for full page border effect, that too can be done. For the regular color background option, you may want to just stick with an outer main table plan as described above. For using an image style border, add the BACKGROUND property to your starting BODY tag. The trick is to still use a table layout for your navigation and contents though. The column widths would have to be specified to best fit into your background image.

To have the full page image effect, you may want to kill the white buffer space too as described on the Fixed BG Image FAQ page.

Here is the image being used for these examples, click here.

An example of using a background image for the full body area, click here.

The table in that last example is still set for 100% width and the first column is set to about 200 pixels. This gives the first column contents a good space to be "on top" of the border part and the main content area on the "blank" part.

The image being used for the above examples is a simple 5 x 1500 gif image. Why those dimensions? The 5 height is good because when this particular image tiles down the page, the blend effect will look more natural. The 1500 width is to accomodate those people with a higher resolution. If you view the image background on an even higher resolution, you will see the start of the image again as it tiles. I figure 1500 is a good size to go by and most people should be under this amount.

That was just a small example of a border image background. If you take a look at the HTMLGoodies site, you will see a double border background in action.
How do you ... do a border background?

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads