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

CSS

Posted by Luqman Shah
Luqman Shah
3,016 Points

How to shorten the height of a vertical line border in CSS

So I'm practicing what I've learned from html and css basics, and I'm trying to create a nav-bar bellow my h1 tag in my header, and I'm trying to create some separation between the un-ordered lists within the nav with a border property, but I can't seem to figure out how to decrease the length of the borders. I want it to be the same height (or shorter) than the words.

here's the html code: <header class="main-header"> <h1>Food Source</h1> <p>Your source, for food stuff.</p> <nav class="nav"> <ul class="ulc"> <li><a id="#Home" href="#Home">Home</a></li> <li><a id="Articles" href="#Articles">Articles</a></li> <li><a id="Recipes" href="#Recipes">Recipes</a></li> <li><a id="About" href="#About">About</a></li> <li><a id="Contact" href="#Contact">Contact</a></li> </ul> </nav> </header>

here's the css code: li { font: arial; text-align: center; font-size: 45px; display: inline; border-right: 2px solid #696969; padding: 20px; }

EDIT: sorry treehouse removed all my indentation so it might be hard to read the code..

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

To preserve indentation (and other layout), use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Your padding is expanding the list items in all directions, but you don't really need (or want) the vertical direction expanded. So you can explicitly set vertical padding to 0 when you set the horizontal to 20px:

  padding: 0 20px;
Luqman Shah
Luqman Shah
3,016 Points

Thank you so much, this really helps. Also, why isn't my font changing to arial, it's still remained as the default web browser font. This doesn't often happen on workspace but for some reason it's happening in atom.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

When using the "font" shorthand, both the font-size and font-family values are required, so since that line is incomplete, it is being ignored. But since you already have a separate setting for "font-size" a few lines down, you might just change the property name to "font-family" to set the Arial font.

Happy coding!