Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Shaun Kelly
Shaun Kelly
35,560 Points

How to display vertical line on a web page?

Hey guys! Im trying to create a vertical just to the left of the centred text on my website! I want stems coming off the line so it kind of looks like a navigation as you scroll down the page. Could anyone advise me on how to achieve this?

Many thanks!

1 Answer

Christian Andersson
Christian Andersson
8,712 Points
Christian Andersson
Christian Andersson
8,712 Points

Vertical lines are not as easy to make as horizontal ones (which you can do with the <hr> tag).

However, what you can do is to add the following CSS line to the <div> element in which your text is in:

border-left: 1px solid black;

If you are unsure of how to do this, paste some code here and I'll have a look. Depending on how your website is structured, my suggestion might not be the best solution.

Hope it helps!

Shaun Kelly
Shaun Kelly
35,560 Points

Hi, although this is a good idea I'm not sure it fits my intentions. I have found something similar to what i want to achieve here: http://www.elliotcondon.com