Vertical rule

[jglasspoole]

I am going to be designing a site that requires a black vertical line separating a sidebar on the left hand side and the main content. I have been trying for two years (dumb, huh) to figure out how this is done. My understanding is that I need to draw a rule and insert it as a graphic. Is there an easier way to do this in HTML?

I appreciate your feedback!

[gthorley]

Try this in the body of a page and then mess around with it.

<center>
<table BORDER=0 CELLPADDING=0 WIDTH="98%" >
<tr>
<td BGCOLOR="#FFFFFF" width="100%">*
<center>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" >
<tr>
<td VALIGN=TOP WIDTH="149">*
<center>
<table BORDER=0 CELLSPACING=0 CELLPADDING=5 WIDTH="100%" >
<tr>
<td VALIGN=TOP height="286" width="100%">
<center>
</center>
</td>
</tr>
</table>
</center>
</td>
<td VALIGN=TOP WIDTH="1" BGCOLOR="#000000"><img SRC="spacer.gif" BORDER=0 height=1 width=1></td>
<td VALIGN=TOP width="609">*
<center>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table></center>
<center>
</center>

Spacer.gif is simply a 1x1 pixel gif file with nothing in it. Deamweaver seems to call this transparent.gif when it makes it.

[Nicky]

Youc an use the example above and it will work (although make sure that you insert quotation marks around ALL attributes such as border="0").

However, you don't really need a spacer gif to do the trick, and they do tend to confuse alternative browser such as speech ones.

What you can do is create a table with 3 columns, make the middle column about 3/4 pixels wide (or depending how wide oyu want your vertical line) and then change the background color.

You should experiement in as many ways as possible as this si the only true way to learn.

[gthorley]

Originally posted by Nicky

However, you don't really need a spacer gif to do the trick, and they do tend to confuse alternative browser such as speech ones.

What you can do is create a table with 3 columns, make the middle column about 3/4 pixels wide (or depending how wide oyu want your vertical line) and then change the background color.

So in my example if you take out the <img SRC="spacer.gif" BORDER=0 height=1 width=1> and increase the table width to 3 you should get a black line. In IE you do but in netscape you don't. I was under the impression in Netscape you had to have something in the table and that is why the 1x1 pixel gif is used. Could you show a simple code as you suggest to create the vertical line that works in Netscape?

[creole]

Nicky...gthorley is correct...you have to have SOMETHING to fill the table cell or the cell collapses in NS. Putting a &nbsp; won't work if you want really thin lines as it is one full character space.

jglasspoole...

try this code

<table>
<tr>
<td>
content here
</td>
<td width="1"><img src="clear.gif" width="1" height="1" border="0"></td>
</tr>
</table>

That is the most basic table structure you can have that will give you what you need. You can adapt it from there. (clear.gif is the same thigng as spacer.gif beign a 1x1 pixel transparent GIF)

here is a link to download the clear.gif. Just right click and save as.

http://www.oursmallgroup.com/images/clear.gif

[gthorley]

Creole I can't get a line to show in your simple structure is something missing.

[jglasspoole]

Thanks for the feedback! I was able to get gthorley's code to work in IE but not Netscape. (Does anybody else hate Netscape as much as I do?!!!)

Creole, I couldn't get your code to work either.

[creole]

sheesh...everyone's a critic...maybe if I would have put a background color in the table cell like this:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
content here
</td>
<td width="1" bgcolor="#000000"><img src="clear.gif" width="1" height="1" border="0"></td>
</tr>
</table>

so solly cholly

[westmich]

Don't forget: you will need to make an actual GIF image. Otherwise, some users may get a place holder instead.

[creole]

yeah...westmich, in my second to the last post, I gave a link to clear.gif for them to download.

[gthorley]

Also I believe the cellpadding="0" is a must if you want a thin line.

[dominique]

I know this is going to sound a little rediculous, but after 20 minutes of looking at the same pages over and over I have lost hope of finding the answer on my own. I can't seem to figure out how to post a new question, only reply to existing threads. Can anyone help me? Thank you

Dominique

[Nicky]

If you want to post a new thread, you must go to the forum page that lists all the threads and then click on "New Thread".

[jglasspoole]

Creole, your solution works great! Thanks!!!

[creole]

very cool...I am glad that it worked out for you...

cheers