by Lori Hylan
This week's column is a continuation of last week's, so you'll want to read that first if you haven't already.Let's open our Toolbar Example HTML file from last week. Mine is called "background.html," and so far it looks like this:
<HTML> <HEAD> <TITLE>Toolbar Example</TITLE> </HEAD> <BODY BACKGROUND="/devforum/design/96/strip.gif" TEXT="#000000" LINK="#D60027" VLINK="#232182"> </BODY> </HTML>What we're going to do now is fill in the space between the <BODY> and </BODY> tags, using a <TABLE> to physically separate a series of navigational buttons from the main text. Our "strip.gif" background image will visually separate them.
We'll start by defining the width of our table in pixels. (You could also define the table in percentages or not at all, but since we're going to define the cells in terms of pixels in order to match the background image, we'll define the entire table that way too.) Let's go with a 500-pixel-wide table, with both a CELLSPACING=0 and a CELLPADDING=0 (this will ensure acurrate measurements). So directly below your <BODY> tag you should have this:
<TABLE WIDTH=500 CELLSPACING=0 CELLPADDING=0>Next we'll start a row within the table. It so happens that this will be our only row, but of course the <TABLE> construct allows for as many as you'd like. Since my toolbar will be composed of text, I'm going to take the opportunity to set all the cells in this row to left-justified with the ALIGN=LEFT extension. If you'd like to use graphics for your toolbar buttons, you might center them while leaving the main text left-justified; in this case, you'd need to set the alignment in the individual cells instead of in the row tag. The syntax is the same (ALIGN=LEFT, CENTER, or RIGHT).
<TABLE WIDTH=500 CELLSPACING=0 CELLPADDING=0> <TR ALIGN=LEFT>Now we'll start a column for the toolbar. First we'll do a bit of guesswork; I'm guessing that "browser shift" will cause a 150-pixel-wide column to overflow the 150 pixels of color in our background image, so we'll set our toolbar column to 130 pixels wide. In fact, I *know* that "browser shift" will occur--where the guesswork comes in is deciding how much it will affect the alignmnet of my table and background image. The tricky part is that "browser shift" not only varies among browsers, but among operating systems running the *same* browser. Like with all HTML, it pays to test your designs on as many browsers and as many operating systems as possible, and adjust accordingly.
While I'm in the cell tag, I'm also going to set the vertical alignment--that is, the alignment of this column relative to the others in the table. The default vertical alignment in Netscape, implausibly enough, is MIDDLE, so I'll need to override that with a VALIGN=TOP. (I could also have put the VALIGN extension in the <TR> tag.)
<TABLE WIDTH=500 CELLSPACING=0 CELLPADDING=0> <TR ALIGN=LEFT> <TD WIDTH=130 VALIGN=TOP>At this point I need to put some text in my toolbar column; I'm not going to show it here because it would take up too much space. Instead I'll just close my first cell with a </TD> tag and skip ahead to the next column in the table, which will be blank. There are two reasons for the blank column: (1) to make sure we're clear of the colored background area, and (2) to leave a gutter of space between the toolbar and the main text. I'm going to set this column to 40 pixels wide.
. . . </TD> <TD WIDTH=40 VALIGN=TOP> </TD>Finally, I'll make a column for the main text. The width of this column is determined by subtracting the widths of the other two from 500 (the width of the entire table). That means that this column will be 330 pixels wide.
<TD WIDTH=40 VALIGN=TOP> </TD> <TD WIDTH=330 VALIGN=TOP>main text here</TD> </TR> </TABLE>You'll notice above that after I closed the final column with a </TD> I also closed off the row and table tags. This is essential; missing closing tags means that your table won't display at all.
Now let's check the results. If you don't like any of the spacings, go back and adjust your background image, your HTML document, or both.
