Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Parvez Noor
PLUS
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,028 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 :)