dreamweaver templates | responsive designs | frontpage templates | expression web templates | wordpress templates | css templates | website templates

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.

clearpixel.png

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.

 

Features
News

Frontpage CSS Templates

New section with 100% CSS based XHTML valid Frontpage templates.

Microsoft Expression Web Templates

New section containing templates Microsoft's new Expression Web program.

Dreamweaver CSS Templates

New section with 100% CSS based XHTML valid Dreamweaver templates.

Microsoft Expression Web Templates

New section containing templates Microsoft's new Expression Web program.

Website Templates

We now have a selection of website templates with full PSD source files.

CSS Templates

New range of 100% CSS layouts and XHTML compatible.

read more read more...


Resellers
Check out our reseller program and earn 20% commission on all templates sold through your site - that's over $30 per sale for our ecommerce plus templates.

read more read more...

Affiliate program
5% discount promo

Find us on Twitter

Follow us on twitter

We accept credit card and Paypal paymentsFind us on FacebookFollow us on twitterJoin us on Linkedin

Frontpage Templates | Dreamweaver Templates |  Website Templates |  Expression Web Templates
License + Terms | Privacy Policy | Contact us | Help | Shopping Cart

© 2001 - 2024 The Template Store - All Rights Reserved
Shopping cart software by ecommercetemplates.com