To
download any of these images, right-click (Windows)
or click-and-hold (Macintosh) on them; then select
"Save image as..." and choose a directory
on your hard drive where you'd like to save them.
First
off, the individual pieces appear below. After those
you can see some samples of how this border design
looks when the pieces are put together.
THE PIECES (6) - All have transparent backgrounds
|
|
03-02.gif
Size: 1.58K |
|
03-01.gif
Size: 1.2K |
|
03-03.gif
Size: 1.7K |
03-04.gif
Size: 340 bytes |
03-05.gif
Size: 341 bytes |
|
|
|
03-06.gif
Size: 1.4K |
EXAMPLE
ONE |
|
This
design offers a solution to the problem
of flowing text within borders that are
closed at the bottom - by not being
closed at the bottom. It's likely to be
the easiest one for you to adapt to your
own use, since all you really need to do
is to copy the HTML for the example, flow
in your own content, and add vertical border
sections to make up the height of the text.
Alignment
within the table cels is crucial, but
again, just use the example code as your
model and you should be fine. A <BR>
(line break) tag follows each vertical
border section.
The
only other thing to bear in mind is that
in this example I'm using a transparent
GIF file to enforce the column spacing.
You'd need to do the same, or something
similar, in your own project.
The
lower version's table uses a border attribute
of 1 to show you the table structure.
Remember
to read the Layout
Tips.
|
EXAMPLE
TWO |
|
Copies
of the border can be stacked to frame subsections
of a page. Just be sure that if you do this,
you include enough vertical sections to
fully frame your content even if the user's
fonts size is very large.
Also
you can see here that because the pieces
use a transparent background, you can
change the color within the border.
Remember
to read the Layout
Tips.
|
|
1.
Remember that each of these pieces is downloaded only
once by the web browser. That means that there's no
additional download time for each of the repeating sections.
2.
This border's left open at the bottom, so you don't
need to worry so much about the user's font size
forcing the design apart. However you should still
probably add an extra vertical section below the end
of your content to allow for larger font sizes.
3.
Be sure that your table sets its border size, cel padding,
and cel spacing all to zero - otherwise there will be
gaps in the design. On some browsers if these attributes
are not set they may default to one, not zero.
4.
This design uses a transparent background (the exposed
interior is transparent) so you can set the table color
to whatever you like, as in some of the examples.
5.
Using a small transparent GIF, as I do here, is a handy
layout trick. HTML isn't a perfect layout medium and
sometimes you just need to force your elements to go
together the way you want them.
THIS PAGE SPONSORED BY
These
designs are all copyright Bradley W. Schenck, 1997 &
1998, but may be used without fee by individuals for
non-commercial web projects. If
you're building your own web site, and you don't make
money from the site, feel free to use these designs.
If you are profiting by building a site for someone
else, do not use them. If you are creating your own
commercial site, do not use them. If
you want to use one of these designs as a tattoo, a
stationery design for your personal email, or want to
make an object for your own use (not for sale) using
one of these designs, go ahead. It
is specifically prohibited for anyone other than the
artist to include these images in a collection of clip
art, whether for profit or not. Got it?
If
you use these designs on your web pages, I would be
grateful for a credit and, if possible, a link to:
http://www.webomator.com/bws.
|
|
"Trade
them for a package of sunshine
and flowers.
If you want the things you love, you must
have showers.
So when you hear it thunder don't run
under a tree,
There'll be Pennies From Heaven for you and me."
"Pennies
From Heaven" by John Burke & Arthur Johnston, 1936
|
|