vertical lines on web pages

[SarcasticDwarf]

Can anyone tell me how to easily do vertical lines on a page like this, preferably without using tables.

 

[kt]

background image?

 

[SarcasticDwarf]

Originally posted by: kt
background image?

I dunno, thats why I am asking

 

[TommyVercetti]

Frames?

 

[damiano]

why don't you want to use tables?
if you don't background image is the easiest way

 

[gopunk]

the best (and easiest imo) way is to do it with tables.. in this case you make one with 5 columns, make the 2nd and 4th have a thin width and set background color to something. or make a 1x1 pixel image in the color of your choice and set it to be the background of that cell.

 

[notfred]

<div style="float: left;width:33%;border-right:2px solid black; height:100%;"></div>
<div style="float: left;width:33%;border-right:2px solid black; height:100%;"></div>
<div style="float: left;width:33%;border-right:0px solid black; height:100%;"></div>

 

[kt]

Originally posted by: DeathByAnts

Originally posted by: kt
background image?

I dunno, thats why I am asking

No, that's my answer. Use background image if you don't want to use table. Create an image with a 1px height and maybe 800px width. Put the color pixel where you want to appear and repeat the image in the y-direction as a background.

 

[damiano]

Originally posted by: notfred
<div style="float: left;width:33%;border-right:2px solid black; height:100%;"></div>
<div style="float: left;width:33%;border-right:2px solid black; height:100%;"></div>
<div style="float: left;width:33%;border-right:0px solid black; height:100%;"></div>

wtf

 

[SarcasticDwarf]

Here's what I have so far, now how do I get the black pixel to repear without
a million times?

<table width="100%" border="0" cellpadding="0">
<tr>
<td></td>
<td width="1"><img src="images/navigation/1x1-black.jpg"></td>
<td>
</td>
<td width="1"><img src="images/navigation/1x1-black.jpg"></td>
<td></td>
</tr>
</table>

 

[notfred]

Just use my damn solution. It looks like this.

 

[shutterFly]

Originally posted by: DeathByAnts
Here's what I have so far, now how do I get the black pixel to repear without
a million times?

<table width="100%" border="0" cellpadding="0">
<tr>
<td></td>
<td width="1"><img src="images/navigation/1x1-black.jpg"></td>
<td>
</td>
<td width="1"><img src="images/navigation/1x1-black.jpg"></td>
<td></td>
</tr>
</table>

Try setting the background of the cell to the 1x1-black.jpg. You also might have to set the width of the other cells to 100%, depending on what you have in them, to "squeeze" the black cells to 1 pixel.

<table width="100%" border="0" cellpadding="0">
<tr>
<td width="100%"></td>
<td width="1" background="1x1-black.jpg"><img src="images/navigation/1x1-black.jpg"></td>
<td width="100%">
</td>
<td width="1" background="1x1-black.jpg"><img src="images/navigation/1x1-black.jpg"></td>
<td width="100%"></td>
</tr>
</table>

 

[notfred]

Originally posted by: damiano

Originally posted by: notfred
<div style="float: left;width:33%;border-right:2px solid black; height:100%;"></div>
<div style="float: left;width:33%;border-right:2px solid black; height:100%;"></div>
<div style="float: left;width:33%;border-right:0px solid black; height:100%;"></div>

wtf

It's the answer to his question.

 

[Electric Amish]

Originally posted by: notfred

Originally posted by: damiano

Originally posted by: notfred
<div style="float: left;width:33%;border-right:2px solid black; height:100%;"></div>
<div style="float: left;width:33%;border-right:2px solid black; height:100%;"></div>
<div style="float: left;width:33%;border-right:0px solid black; height:100%;"></div>

wtf

It's the answer to his question.

What does the third line do?? Why do you need it?

 

[SarcasticDwarf]

Originally posted by: notfred
Just use my damn solution. It looks like this.

because if you just throw it in there, you get something like this

 

[notfred]

Originally posted by: Electric Amish

Originally posted by: notfred

Originally posted by: damiano

Originally posted by: notfred
<div style="float: left;width:33%;border-right:2px solid black; height:100%;"></div>
<div style="float: left;width:33%;border-right:2px solid black; height:100%;"></div>
<div style="float: left;width:33%;border-right:0px solid black; height:100%;"></div>

wtf

It's the answer to his question.

What does the third line do?? Why do you need it?

I just figured he might want to put something on the right hand side of the second line.

 

[notfred]

Originally posted by: DeathByAnts

Originally posted by: notfred
Just use my damn solution. It looks like this.

because if you just throw it in there, you get something like this

You put it in the damn <head> tag, what did you expect? have you ever wrritten HTML before today?

 

[SarcasticDwarf]

Originally posted by: notfred

Originally posted by: DeathByAnts

Originally posted by: notfred
Just use my damn solution. It looks like this.

because if you just throw it in there, you get something like this

You put it in the damn <head> tag, what did you expect? have you ever wrritten HTML before today?

yeah, I noticed that and corrected it right after I uploaded. It is already fixed

 

[Electric Amish]

Originally posted by: DeathByAnts

Originally posted by: notfred

Originally posted by: DeathByAnts

Originally posted by: notfred
Just use my damn solution. It looks like this.

because if you just throw it in there, you get something like this

You put it in the damn <head> tag, what did you expect? have you ever wrritten HTML before today?

yeah, I noticed that and corrected it right after I uploaded. It is already fixed

You're still missing a <BODY> tag.

 

[SarcasticDwarf]

Originally posted by: Electric Amish

Originally posted by: DeathByAnts

Originally posted by: notfred

Originally posted by: DeathByAnts

Originally posted by: notfred
Just use my damn solution. It looks like this.

because if you just throw it in there, you get something like this

You put it in the damn <head> tag, what did you expect? have you ever wrritten HTML before today?

yeah, I noticed that and corrected it right after I uploaded. It is already fixed

You're still missing a <BODY> tag.

uh, oops

 

[911paramedic]

<html>
<head>
</head>
<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td width="1" bgcolor="#999999"></td>
<td width="600"></td> <---Content area, and change the width to whatever you want.
<td width="1" bgcolor="#999999"></td>
<td></td>
</tr>
</table>
</body>
</html>

 

[Electric Amish]

It should be like this:

<div style="float: left;width:33%;border-right:2px solid black; height:100%;">Content for left third in here </div>
<div style="float: left;width:33%;border-right:2px solid black; height:100%;">Content for middle third in here</div>
<div style="float: left;width:33%;border-right:0px solid black; height:100%;">Content for right third in there</div>

 

[notfred]

here is exactly what you want.