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.
PIECES (12): All have transparent backgrounds
Size: 326 bytes
Size: 288 bytes
Size: 292 bytes
all of the pieces are put together in
a basic example. The second version below
has its table border turned on, so you
can see the table's structure (The table
border's width throws the graphics a little
out of alignment).
A couple of things are keeping the pieces
lined up properly. First, the top cel
of the table has its VALIGN
set to "TOP",
and each of the graphics in that row has
also set to "TOP".
The bottom cel's VALIGN
is set to "BOTTOM",
as are the ALIGN
attributes of each of the graphics. The
left cel has its ALIGN
attribute set to
and the right-hand cel has its ALIGN
attribute set to
In the side cels, <BR>
break) tags force each graphic below the
at the top of the center cel there's
an invisible, trasparent GIF file
that's sized to be 240 pixels wide.
This forces that cel to be exactly
wide enough to keep the border pieces
That GIF file is in fact only 2 pixels
wide by 2 pixels high; I use the image's
to force it to whatever size I want.
By doing this, your browser just downloads
one tiny file and I can then use it
in all sorts of sizes to adjust the
spacing of the graphics I'm placing
on the page. Don't you just love this
to read the
example demonstrates how you can adjust
the border's size by repeating or dropping
out elements. Now our design's quite short
and wide, after we've deleted the center
knots from the side and added more knot
and straight sections to the top and bottom.
you can see that due to the graphics' transparent
background, we can add a background color
to our table and the border design will
"float" over it.
to read the Layout
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.
You should be very cautious about placing text
inside a border that's closed on the bottom; because
the size of fonts will vary from one system to
another, on some systems your border may develop
gaps between the sections. It's safest to use
a graphic in the middle so you have control over
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.
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.
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
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?
you use these designs on your web pages, I would be grateful
for a credit and, if possible, a link to:
them for a package of sunshine
If you want the things you love, you must
So when you hear it thunder don't run
under a tree,
There'll be Pennies From Heaven for you and me."
From Heaven" by John Burke & Arthur Johnston, 1936