Make your own free website on Tripod.com


Internet Link Exchange
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.