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
Kirt Perez
7,374 PointsAt the start of the video, how are the lines in between each navigation button created?
By lines I mean the light blue colored line separating "Best City Guide", Ice Cream, Donuts etc..
3 Answers
Rick Gleitz
47,878 PointsHi Kirt,
Those lines aren't really lines that were created separately. They are the box behind the buttons showing through between the placement of the buttons.
Hope this helps.
Rick Gleitz
47,878 PointsI'm really a bit rusty with this, but I think the color should be in the header (which contains the list), not in the lists themselves, if that's what you meant.
Kirt Perez
7,374 PointsTook some time to try and figure it out but I now see that there is in fact a margin value for the navigation list. It needs margin style for that separation. For some reason, you can't inspect the separation area from the code given in the workspace. Im only able to inspect 'a' elements for this case and the margin styles for that element are being inherited from 'li' rules made in style.css, so its opaque in the dev tool. The .main-nav li rule has the margin values affecting the separation but why can't I inspect the .main-nav li rule?
Rick Gleitz
47,878 PointsI'm not exactly sure how to do this, or even what exactly it is you want to do. Like I said I've been away from CSS a while, and I was never very good at using the inspection features in the browser anyway, just kind of muddled through it. I did do ctrl-shift-c on the webpage and was able to hover over elements and see their values, if that helps.
Kirt Perez
7,374 PointsKirt Perez
7,374 PointsI’m trying to replicate this style from scratch without looking at the files or inspecting element to try and challenge myself. I might have put the background color targeting the list container instead of targeting the individual lists inside the list container, that’s probably why I just have a huge white block behind my links. I’m not on my computer at the moment to test it out, but does this sound right to achieve my question?