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!
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.
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%" >
</table></div>
|
![]() |
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.
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:
</td>
<td WIDTH="80%">
</td></tr></table>
|
![]()
Actual size of
|
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%" >
<td WIDTH="80%">
</td></tr></table>
|
[an error occurred while processing this directive]