|Member of the Internet Link Exchange|
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:
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>
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.