How-to #1
Draw a thin vertical line on a page
Page
updated to include intersecting vertical and horizontal
lines.
Many pages divide their content into columns, often separated by a thin vertical line, like this:
The main page content here |
Here is the news blah |
This effect is easy to achieve but appears to be little-documented. There are two simple ways to do this.
1. The browser-compatible way
This is the method implemented in the above example. The text is laid out in a table with three columns, as can be seen if the borders are made visible:
The main page content here |
Here is the news blah |
The first, wider column contains the main text, with the third column containing the 'news' section. The middle column contains the thin line, which appears thicker in this example only because the table borders are made visible; normally, you would set the border to have a width of zero in this kind of layout.
The HTML which does this is simple:
<table cellspacing="5" border="0" cellpadding="0">
<tr valign="top" align="left">
<td width="300"><p>The main page content here</p></td>
<td width="1" bgcolor="#0000FF"><BR></td>
<td width="150" valign="top" align="left">
<p>Here is the news</p>
<p>blah<br>blah<br>blah</p>
</td>
</tr>
</table>
The important points are:
- no table border (set it explicity to zero)
- the column which contains the line should have a width of 1 pixel, must not have the align or valign parameters set, and must contain some contents which must not widen the column; a single <BR> element can be used, or I prefer a 1-pixel square transparent .GIF file
- the table's cellpadding attribute must be set to zero or the line will be thickened
- the table's cellspacing can be set to greater than zero to achieve a gap between the line and the cell contents, but if this is done the table can only contain one row; otherwise, the vertical line will be interrupted by the extra spacing (try it and see)
You may find that despite all this, the line still doesn't work correctly in Netscape Navigator 4.x. The way around this problem is to ensure that all the widths of the cells in the table are explicity set. IE can cope without this, but Navigator is a bit more temperamental and sometimes doesn't like it if cells don't have the width set.
2. Using a style (Microsoft IE-specific)
The above technique works fine in Netscape Navigator and Microsoft Interner Explorer. If you know you are going to be designing for systems using IE exclusively, then you can use a much simpler technique, which saves fiddling around with the table. All you have to do is set a left (or right) border for a cell in a table. This can be included in a style sheet if you wish. The CSS syntax which produces the result below is:
<TD style="border-left: 1px solid blue; padding: 5px;">
This style must be applied to all cells which are to have a left border. The result looks like this:
The main page content here |
Here is the news blah |
Note that this table only contains two columns, not three. The advantage of this method is that you can have more than one row in the table, and the vertical line won't be interrupted. You should use padding in the style to make space between the line and contents, while in the table cell padding and cell spacing must be set to zero.
The above style is IE-specific and you won't see a vertical line if you are using Navigator 4.x; it works fine in Navigator 6.
3. Vertical and horizontal lines
(Thanks to Dana for suggesting this addition to the page.)
What if you want to have intersecting vertical and horizontal lines on a page? The only ways to do this are to use CSS styles, or to use layers, which have their own problems. Suppose you want something which looks like this:
| A table with three rows... | The second column... |
| ...and two columns... | ...also has some text... |
| ...with contents in all cells | ...just to fill the cells |
This effect (which you won't see in Navigator 4.x) is generated by the CSS border property. The top right and bottom right cell both have a custom class applied which sets the left border to a 1-pixel solid blue vertical line. The middle left cell has another class which has a 1-pixel red top border for the horizontal line. The middle right cell needs both a top border and a left border, so a third class is used to set both. Finally, cell padding is used in the table to put some space between text and borders (note: cell spacing will cause gaps in the lines).
The main problem with this technique is not only that Navigator 4.x won't show it, but that it may cause the table's layout to be rendered incorrectly by that browser. It would be better if Navigator 4.x didn't know anything about those styles, and we can do this by using a separate style sheet called lines.css in addition to the regular sheet used by this page.
How is this done? It's not difficult - use the @import CSS statement to import a CSS external style sheet. Navigator 4.x understands the 'LINK' tag to load an external sheet, but doesn't support @import. Any styles in a sheet loaded this way will not be seen by this browser. The syntax for @import is:
<style type="text/css">
<!--
@import "lines.css";
-->
</style>
Note that the @import command must be enclosed in a <style> tag. The HTML comments are for the benefit of really old browsers. The technique works on Internet Explorer 4.x or later, Netscape 6.1, and Opera 5.11. The style sheet itself can be downloaded from this link:
Download
lines.css stylesheet (1K)