Chibi Creations Tips Page
 
Using Left-Bordered Backgrounds

I tested in this page in two browsers at three resolutions
before releasing it.

 (Netscape, IE)
 (1024 x 768, 800 x 600, 640 x 480)

There are several ways to make sure your text does not
show up over left bordered backgrounds.  Hopefully I can
show you these ways and you can pick one that you're
comfortable with using, and that formats your page
correctly.

If you have the advantage, as I do, to be able to adjust
your resolution quickly it's best to test your page at the
most popular web browsing resolutions to be sure the text
never goes over the border.

I have found that a lot of people are browsing the
web at 640 x 480 resolution,
that the most popular is 800 x 600,
and that many (like myself) use 1024 x 768.

For that matter, if you happen to have Netscape and IE,
try viewing your page in both browsers as well
to make sure most people will see the page as you
intended!

All methods described are assuming that you are using your
browser opened at maximum width.

You MUST include the closing statements for tables - if you don't,
Netscape browsers will see nothing on the page but the background!


Centering the Text

The text in this and the preceeding paragraphs was simply
centered and cut off into sentences that were about the
same length.

This is one approach that could work, but it can be tedious
and you do still have to make sure the paragraphs are
narrow enough not to show up over the left border.


Using a Simple Table
 
Most graphics sites give the advice to use this method:

This text is in a right adjusted table set at 80% of the width of the browser.  This will probably work with most browsers and most bordered backgrounds, but you should adjust the percentage if your left border is very wide, or very narrow. 

This table has a visible border for demonstration purposes - your own page should have an invisible border using the code below.

Codes:

<div ALIGN=right><table BORDER=0 COLS=0 WIDTH="80%" >
Placed just before your content starts (the very first text or picture that will show up on the page).

</table></div>
Placed just after the content ends (the very last text or picture that will show up on the page - before the /body and  /html statements).
 

Using a  Table with Two Columns


 This text is also in a table - but it has two columns in case you want to use buttons on the border. 

The entire table is taking up 100% of the window. 
Column 1 is taking up 20% of the table, and column 2, where my text and content reside, is taking up 80% of the table. 

If you have very narrow or very wide borders, you should, of course, adjust the percentages for each column so that they total to 100.

This table has a visible border for demonstration purposes - your own page should have an invisible border using the code below.

Codes:
<table BORDER=0 COLS=2  WIDTH="100%" >
<td WIDTH="20%">
Placed just before your content starts (the very first text or picture that will show up on the page).
First column.  If using buttons in the first column, etc., place after this code.

</td>
End of first column. 

<td WIDTH="80%">
Place your actual content after this code.

</td></tr></table>
Placed just after the content ends (the very last text or picture that will show up on the page - before the /body and  /html statements).
 


Using a  Table with Two Columns
and a Transparent Spacer



 
 

Actual size of
TRANSPARENT.GIF

 This text is also in a table - but it has two columns in case you want to use buttons on the border and uses a transparent spacer in the first column to keep the text from appearing in the border.

For deomonstration purposes I have a border around the little transparent gif to show you where it is, but you would have no border around it on your own page, and no one will ever know it's there.

This transparent image is called TRANSPARENT.GIF (feel free to download it) 

The image is only 15 pixels wide by 15 pixels high - but in the coding I stretched it to 122 wide x 15 high.  This works with this particular border - but if you have wider borders you might want to use a different width. 

Column 1 is taking up 5% of the table, and column 2, where my text and content reside, is taking up 80% of the table. 

These do NOT add up to 100%, but if something forces the first column to become more than %5, then the browser accomodates by making column 2 wider than you wanted, and having to scroll sideways to see the rest of the page, so I adjusted it down. 

These percentages may have to be adjusted depending on the background.

This table has a visible border for demonstration purposes - your own page should have an invisible border using the code below.

<table BORDER=0 COLS=2 WIDTH="100%" >
<tr>
<td VALIGN=TOP WIDTH="5%"><img SRC="transparent.gif" BORDER=0 COLS=2 height=15 width=122></td>
Placed just before your content starts (the very first text or picture that will show up on the page).
Refers to the transparent gif AND it's correct size.
If using buttons in the first column, etc., place after this code.

<td WIDTH="80%">
Place your actual content after this code.

</td></tr></table>
Placed just after the content ends (the very last text or picture that will show up on the page - before the /body and  /html statements).
 

[an error occurred while processing this directive]