LEFT SIDE vs RIGHT SIDE BORDER BACKGROUNDS

Border Backgrounds

Borders can be placed on the left side of your web page or on the right side. But there are a few important things to remember:

The total "border image" should be a minimum WIDTH of "1280" pixels and HEIGHT as small as possible
You must create a "new" border image if you are using a "right side" border
The "TABLE" layout for a right side border will be the "reverse" of that used for a left side border
Set your < TABLE > and < IMG SRC="pixel89a.gif" > BORDER attribute at "1" while working on your web page so you can align the "index" and "text" cells to fit the border background.
When you have finished, remember to set all "borders" back to "0"
When creating a RIGHT side border background image, test view it on your browser at 640x480 resolution to be sure the "Border" image is the right width!

This web page Tutorial demonstrates the difference in a left side border image and a new similar image used for a right side border. The HTML TABLE Code for using both border effects are listed below the images.

Background .gif used for "Left Side Border" -- WIDTH="1280" HEIGHT="72"

Background .gif used for "Right Side Border" -- WIDTH="1280" HEIGHT="72"

HTML Table Code used with "LEFT SIDE BORDER" image above:
NOTE: Use of the "pixel89a.gif" image, sets the "width" of each cell.
(Use your "back" button to return to this page)

< TABLE BORDER="0" ALIGN="left" WIDTH="570" >

< ! --- left cell "Index" area --- >
< TR >
< TD VALIGN="top" ALIGN="center" >
-- INDEX information goes in this cell --
< IMG SRC="pixel89a.gif" WIDTH="135" HEIGHT="1" BORDER="0" VALIGN="bottom" ALIGN="center" ALT="space" > < /TD >

< ! --- middle cell "pixel89a.gif" Space --- >
< TD VALIGN="bottom" ALIGN="center" >
-- This cell uses the "pixel89a.gif" to properly align the "text" and "index" cells --
< IMG SRC="pixel89a.gif" WIDTH="43" HEIGHT="1" BORDER="0" VALIGN="bottom" ALIGN="center" ALT="space" > < /TD >

< ! --- right cell "Text" area --- >
< TD >
-- TEXT information goes in this cell --
< IMG SRC="pixel89a.gif" WIDTH="395" HEIGHT="1" BORDER="0" VALIGN="bottom" ALIGN="center" ALT="space" > < /TD >
< /TR >
< ! --- Close Table --- >
< /TABLE >

" View left side border example " to see an example of this layout.

HTML Table Code used with "RIGHT SIDE BORDER" image above:
NOTE: Use of the "pixel89a.gif" image, sets the "width" of each cell.
(Use your "back" button to return to this page)

< TABLE BORDER="0" ALIGN="left" WIDTH="600" >

< ! --- left cell "Text" area --- >
< TR >
< TD VALIGN="top" ALIGN="center" >
-- TEXT information goes in this cell --
< IMG SRC="pixel89a.gif" WIDTH="400" HEIGHT="1" BORDER="0" VALIGN="bottom" ALIGN="center" ALT="space" > < /TD >

< ! --- middle cell "pixel89a.gif" Space --- >
< TD VALIGN="bottom" ALIGN="center" >
-- This cell uses the "pixel89a.gif" to properly align the "text" and "index" cells --
< IMG SRC="pixel89a.gif" WIDTH="40" HEIGHT="1" BORDER="0" VALIGN="bottom" ALIGN="center" ALT="space" > < /TD >

< ! --- right cell "Index" area --- >
< TD >
-- INDEX information goes in this cell --
< IMG SRC="pixel89a.gif" WIDTH="135" HEIGHT="1" BORDER="0" VALIGN="bottom" ALIGN="center" ALT="space" > < /TD >
< /TR >
< ! --- Close Table --- >
< /TABLE >

" View right side border example " to see an example of this layout.

Designed and maintained by Otter Sites Web Design

Copyright is claimed by Otter Sites Web Design to the entire body of this collection, as an entity, and to the HTML code which presents it as a collection. Otter Sites has received expressed permission for use of public domain and other privately owned works on this web site.

The content of this site, in part or in full, may not be reproduced, published, transmitted, uploaded, modified or distributed in any manner without Otter Sites prior written permission. Otter Sites Web Design is not responsible for material presented on third party linked sites.

Otter Sites does not endorse any banner ads placed on this site by a third party.