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

Parvez Noor
PLUS
Parvez Noor
Courses Plus Student 15,917 Points
Posted by Parvez Noor
Parvez Noor
Courses Plus Student 15,917 Points

How do I change the height of my aside navigation items?

Hi guys,

I'm working on a site to consolidate my learning.

I want a navigation bar in the aside part of my website, which has 3 links, in list elements, which will take up 33.3% of the aside section (the red line around it is the box element of the aside). Each list element will have the background-color set to an image.

The only problem is, I can't seem to change the size of each of the li elements.

Here is my code at the moment:

https://w.trhou.se/5a4hn06ybu

Please help!

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

To change the size of list items try changing the height in your .aside_nav li selector. Then change the height of the actual links to 100% rather than %33.3%,.

.aside_nav li {
    display: block;
    height: 52px;
}

.aside_nav_content a:link { 
//styles
height: 100%;
}

Remember you can use Chrome Dev Tools (or your browsers Dev Tools) to experiment with changes to styles on the fly, which will help you to understand what effect you new styles will make. (Just remember to add them to your files before refreshing the tab :)