| Member of the Internet Link Exchange |
| PREVIOUS | DESIGN RESOURCES |
|
designtips2
designtips2
designtips2
designtips2
Surfing
the Rhine
Surfing the Rhine
Surfing the Rhine
VERTICAL BACKGROUNDS can enhance a site's appearance, but,
these finicky gifs were almost impossible to
find, almost as hard to design, and almost
impossible to overlay with text.
Instead, you can just add color to the first column of a
two-column table, (for example) running the complete width
of the browser, "100%". Set the left column width at "20%" to "30%" and
the height to "100%" so that the stripe runs
top to bottom, and displays correctly in different
screen resolutions. (When using %'s to set the table attributes, enclose in
quotations.) Add color, any color will do, to the
left column and then add your content. The second
column will take up the remaining width (the
combined width of the two columns will
equal"100%"). Add your text between the
TD tags. Turn the border width to 0 when
everything is formatted and you will now have a
personalized "vertical" border layout.
<TABLE BORDER=0 WIDTH="100%">
<TR>
<TD WIDTH="25%" HEIGHT="100%"
BGCOLOR="#C0C0C0" ALIGN=LEFT
VALIGN=TOP>
<!--Place your text, index,
or table of contents here.-->
</TD>
<TD ALIGN CENTER
VALIGN=TOP>
<!--Place your main content
here.-->
</TD>
</TR>
</TABLE>
COLORED BORDER EXAMPLE
Rhine designer tips:
simple measures
to improve and enhance
to illuminate, to discover!
MORE ON TABLES AND BACKGROUNDS-If you would rather
use a vertical border overlaid with text, use a
two-column table to control the page layout.
Measure the width of the border's dark portion
in pixels, set the first column width to slightly
less than that number so the text will stay where
it belongs - in the dark area and not in its
neighbor's white yard and then set the alignment
to left. For added effect, increase the
cellpadding and cellspacing.
If you want to keep the bordered strip
"clean" and place your content only to the right,
set up a two-column table. In the first column,
add enough non-breaking spaces to stretch the
column's width to equal the dark or colored
portion of the background, and then add a few
more to ensure a white space between the two
columns. Better yet, insert a invisible
vertical .gif (equal to the dark portion) into
the first column to hold the width and then
place all of your text within the second
column.
<!--Place the border .gif within the
Body Tags, along with the Text, Link,
Vlink, and ALink tags-->
<BODY BACKGROUND="border.gif"
WIDTH=1024 HEIGHT=10>
<TABLE WIDTH="100%>
<TR>
<TD WIDTH=200 ALIGN="LEFT"
VALIGN="TOP">
<IMG SRC="invisible.gif" WIDTH=200
HEIGHT=10>
<--Your Content Goes Here and
may include a Table of Contents-->
</TD>
<TD>
<--The remaining content goes
here, graphics and all.-->
</TD>
</TR>
</TABLE>
VERTICAL BACKGROUND1 VERTICAL BACKGROUNDS2 Rhine 4 Design Tips:
tables with graphics
and designer type;
tables with columns, and columns without.
MULTICOLUMNS WITH TABLES-Layout design
can also include newspaper or magazine-style
columns. While Netscape features the Column
Tags (see next page), a two or three column table can be
can also be used to control the layout and accommodate
a variety of browsers.
<Table border=0 cellspacing=6>
<TR>
<TH>colspan=5><H2>
Place A Heading Here</H2>
</TH>
<TR valign=top>
<TD rowspan=2>Place copy
for the first column here</TD>
<TD rowspan=2 width=20><BR>
<TD>Place copy for the
second column here</TD>
<TD width=20><BR>
</TD>
<TD>Place copy for third
column here.></TD>
</TR>
<TR>
<TD colspan=3 align=center>
<IMG SRC="my.gif">
<P>
<B>My Graphic>
<TD>
</TR>
</TABLE>
TABLE WITH COLUMNS
MORE DESIGN TIPS On The Rhine Publishing is an
online interactive newsletter. This style sheet
template is available from Microsoft.
|