Home > Help
files >>
Adding vertical lines
Vertical lines
You've probably seen that on some of our templates
and on many other sites vertical lines are used to separate
content. It would be simple just to add a graphic but
if you want the line to expand with the content then
it's not much more complicated and can give a cool and
functional effect. Here's an example so you know what
we're talking about:
|
This where you can put your left hand content.
Maybe you need to separate your menu from your
main body text. As you type the line in the center
gets longer.
This where you can put your left hand content.
Maybe you need to separate your menu from your
main body text. As you type the line in the center
gets longer.
|
 |
This where you can put your right hand content.
Maybe you need to separate your news from your
main body text. As you type the line in the center
gets longer.
This where you can put your right hand content.
Maybe you need to separate your news from your
main body text. As you type the line in the center
gets longer.
|
All you need is a table - here with three cells - and
a transparent gif.
In the 3 cell table set cellpadding to 0 and cellspacing
to whatever you like so the text doesn't touch the line
- in the above example we've set it to 6.
Set the background of the center cell to the color
you require for your line and then place the transparent
gif into the cell and make sure its width and height
are set to 1 pixel. Here a transparent gif you can download
- it's inside the blue border - so you know where to
right click to save.
Now set the middle cell width to 1 and put some text
in the outer two cells to see how it expands - that's
about it - pretty easy and you have a simple way of
separating your content.
|
