How did you make those vertical lines?

July 7th, 2008 · No Comments

Hi Janine

I am very new to websites and designing and liked the vertical lines (divider image) you have separating the THREE sections on your HOME page (i.e. between the books section then videos etc). I am trying to figure out how to specifically do this as I too wanted to construct 3 sections like this and have an actual divide line separating them.

I am only just getting my head around divs and CSS and have access online to Total Training videos…. Would you kindly point me in the right direction in letting me know how to go about duplicating similar effects of this layout and have the dividing line….. be much appreciated.

Regards
Tanya

Hi Tanya,

Creating the vertical lines between the three columns on my site is easier than you might imagine. Here’s the trick: To create the lines, I used the CSS border option, but I created a border that would only display on one side of two of the three divs. So, on the div on the far left, I created a border that only displays on the right side, and on the div that is at the far right, I added a border only to the left. Using the Border category of the CSS Rules dialog in Dreamweaver, you can easily specify if a border should display on any or all four sides of a div. You can also control how thick the border is and what color it is.

I hope that helps you with your vertical lines,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

Tags: CSS · Dreamweaver 8 · Dreamweaver CS3 · Dreamweaver MX · Dreamweaver MX 2004

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

You must log in to post a comment.