Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Vertical Line 1
- Thread starter LLudlow
- Start date
TECHMAN007
Technical User
Only way I could see that happening would be with an image
- Thread starter
- #4
You can always use the keyboard | to seperate them. If you have a large amount of text in each section you could do it w/ a table.
Something like:
<tr>
<td>blah blah blah blah</td>
<td width="1" bgcolor="cccccc"> </td>
<td>blah blah text two</td>
</tr>
The bgcolor is the color of the line. Adjust the spacing of the text to the borders with the tables cellpadding and cellspacing properties.
You may find that you need to put a spacer gif or something in the middle table to get it to work right (in fact that NEVER hurts). Just one of many ways to do it... but it wouldn't eat up a lot of bandwidth.
Hope it helps! Wow JT that almost looked like you knew what you were doing!
Something like:
<tr>
<td>blah blah blah blah</td>
<td width="1" bgcolor="cccccc"> </td>
<td>blah blah text two</td>
</tr>
The bgcolor is the color of the line. Adjust the spacing of the text to the borders with the tables cellpadding and cellspacing properties.
You may find that you need to put a spacer gif or something in the middle table to get it to work right (in fact that NEVER hurts). Just one of many ways to do it... but it wouldn't eat up a lot of bandwidth.
Hope it helps! Wow JT that almost looked like you knew what you were doing!
- Thread starter
- #6
Adding a style-sheet border to one of the sections will allow you to insert a dividing line, for instance:
.rightsection { border: black solid; border-width: 0px 0px 0px 1px}
(assuming a 2-column, 1-row table, with the class 'rightsection' applied to the right hand cell.
Regards,
Jon Wilson
.rightsection { border: black solid; border-width: 0px 0px 0px 1px}
(assuming a 2-column, 1-row table, with the class 'rightsection' applied to the right hand cell.
Regards,
Jon Wilson
-
1
- #8
EugenePaliev
Programmer
Hello all!
I will just summarize.
There at least 4 ways of doing this.
1) Create background image with background color as you need and draw a vertical line at the place you need it. Set this image as page (<body>) background.
2) Use layers.
a) you may set layer width to 1px and set background color as you need;
b) put image with verical line inside the layer. Like in the first example, but more flexible to place.
3) Use CSS. Go to CSS Stles window in DW, create new style and on the Border page set solor, width and style.
the example code:
<style type="text/css">
<!--
.unnamed1 { border-color: black black black #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 1px}
-->
</style>
4) Use tables. Set some cell's width to desired size and background, like pixl8r wrote. One tip: you must insert some image inside this cell (with transparent color or page background color) which width is set to desires size. Because if you just leave an empty cell with &nbsp; iside - you wan't be able to get 1px width.
Example:
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>some text goes here. </td>
<td bgcolor="#990000"><img src="transparent.gif" width="1" height="1"></td>
<td>another text goes here.</td>
</tr>
</table>
That's it.
Good Luck!
I will just summarize.
There at least 4 ways of doing this.
1) Create background image with background color as you need and draw a vertical line at the place you need it. Set this image as page (<body>) background.
2) Use layers.
a) you may set layer width to 1px and set background color as you need;
b) put image with verical line inside the layer. Like in the first example, but more flexible to place.
3) Use CSS. Go to CSS Stles window in DW, create new style and on the Border page set solor, width and style.
the example code:
<style type="text/css">
<!--
.unnamed1 { border-color: black black black #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 1px}
-->
</style>
4) Use tables. Set some cell's width to desired size and background, like pixl8r wrote. One tip: you must insert some image inside this cell (with transparent color or page background color) which width is set to desires size. Because if you just leave an empty cell with &nbsp; iside - you wan't be able to get 1px width.
Example:
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>some text goes here. </td>
<td bgcolor="#990000"><img src="transparent.gif" width="1" height="1"></td>
<td>another text goes here.</td>
</tr>
</table>
That's it.
Good Luck!
- Status
Similar threads
- Locked
- Question