Left Side vs Right Side Borders
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:
  1. The total "border image" should be a minimum WIDTH of "1280" pixels and HEIGHT as small as possible
  2. You must create a "new" border image if you are using a "right side" border
  3. The "TABLE" layout for a right side border will be the "reverse" of that used for a left side border
  4. 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"
  5. 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"
LEFT SIDE BORDER



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





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=" "></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=" "></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=" "></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=" "></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=" "></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=" "></TD>
</TR>
       <! --- Close Table --->
 </TABLE>

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





BORDER TUTORIAL   RETURN TO OTTER PLACE FAQS PAGE   HTML STUDENT RESOURCE PAGE




Tutorial designed and created by Otter

Copyright © 1997-2005 Otter Sites for Virtual University. All Rights Reserved.