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

HTML

Posted by Nijesh Nj
Nijesh Nj
18,232 Points

Adding a vertical line in my code.

I was trying to style the look of the about page a little. And now I want a vertical line between the profile photo and about me in the About Page ( http://port-80-fn7c9sefvt.treehouse-app.com/about.html ). I tried some code:

HTML:

<div class="line-separator"></div>

CSS:

.line-separator {
  border-left: 6px red solid;
}

But this is not working, I don't know why, is there any other way out????

3 Answers

Geoffrey Neal
Geoffrey Neal
30,301 Points
Geoffrey Neal
Geoffrey Neal
30,301 Points

Hi Nijesh, btw the link to your about page isn't working.

This is just a wild stab in the dark, but it could be because you don't have anything in your div, so there's nothing to put a border on. Try adding some markup, see if that works.

for example:

<div class="line-separator">
  <h1>Example</h1>
</div>
Nijesh Nj
Nijesh Nj
18,232 Points

Thanks for your support

I tried it first but not working!!!

HTML:

<div class="line-separator">
          <h3>About</h3>
          <p>Hi, guys I am Nic and now i wanted to play a little with html and css. You can see my activities here.</p>
          <p>Love you All!!!</p>
         </div>

CSS:

.line-separator {
  border-left: 6px red solid;
  height: 100px;
}
Marcin Lubke
Marcin Lubke
13,253 Points
Marcin Lubke
Marcin Lubke
13,253 Points

Like Geoffrey wrote, your div is empty, so you may say that it has its height=0. You would have to put some content in it, or just give it some height manually, for example:

.line-separator {
  border-left: 6px red solid;
  height: 100px;
}
Geoffrey Neal
Geoffrey Neal
30,301 Points
Geoffrey Neal
Geoffrey Neal
30,301 Points

You haven't shown your full page. Is it possible you haven't imported your stylesheet?

eg:

<head>
  <link href="path/to/yourStyles.css">
</head>
<body>
  <div class="line-separator">
    <h1>Example</h1>
  </div>
</body>

Are all styles in your CSS not working? Or is it just that one class?

Nijesh Nj
Nijesh Nj
18,232 Points

Yes all others styles are working, only this one sucks