free
This is our archive, please go to the main forum page for the latest discussions and news about free web hosting.


vertical line - how to

gthorley
November 19th, 2000, 19:52
If I want to have 3 colums on a page with vertical lines seperating the middle column from the outer ones what is the best way to write this.

I was thinking of setting up a table with 5 columns and making the second and fourth with say 2 pixel width and then putting a line gif in each. Is there an easier or better way?

Nick
November 19th, 2000, 22:38
Make a one pixel table cell in the middle with the BGCOLOR tag set to the color of the line and insert a 1x1 pixel gif in the cell. Make sure it looks like this:


<td width="1" bgcolor="#000000"><img src="pix.gif" width="1" height="1"></td>


and not


<td width="1" bgcolor="#000000"> <img src="pix.gif" width="1" height="1"> </td>


Because spaces will screw it up.

gthorley
November 20th, 2000, 14:31
Thanks Nick

I was using something similar but your line gives me a thicker line than I want. Your line is correct but it is effected by some other code in my html. I can't see what though. Not the border ="1" I put that in temp to see the outline.
I have posted below

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<table width="35%" border="1" height="100">
<tr>
<td>-</td>
</tr>
</table>
-
<table width="760" border="1" height="800" align="center">
<tr valign="top">
<td>
-
<table width="760" border="1" height="700" cellpadding="2" align="center">
<tr>
<td valign="top" width="213">-
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
<table width="100%" border="1" height="12">
<tr>
<td height="27">-</td>
</tr>
</table>
</td>
<td width="1" bgcolor="#808080"><img src="spacer.gif" width="1" height="1"> </td>


<td width="318" valign="top"> This is just a test to see what the alignment
is going to be like
<hr>

</td>

<td width="1" bgcolor="#808080"><img src="spacer.gif" width="1" height="1"> </td>


<td width="213" valign="top">-
<table width="100%" border="1" height="100">
<tr>
<td>-</td>
</tr>
</table></td>
</tr>
</table>
-
</td>
</tr>
</table>
-
</body>
</html>

Nick
November 20th, 2000, 17:07
Simple answer: cellpadding.

Cellpadding has to be cellpadding="0" for this effect. Use cellspacing="2" cellpadding="0" to get around this.

gthorley
November 20th, 2000, 18:42
Wonderful, that was the problem.

Thanks

Nick
November 20th, 2000, 20:47
No problem, glad to be of some help :D





  
  News · Search free hosts · Free file hosting · Free image hosting · Reviews · Forums · Related Links · Advertising Info · Contact Us


Copyright © 1996-2008 Per Olof Sandholm. All rights reserved. Privacy Statement

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum