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 riccarda
riccarda
6,116 Points

Navigation links: Change margin individually

Hey everyone!

I've been trying to build my web design in HTML and CSS. However, I had some trouble with the navigation. As you can see in the attached image (link below) two links are supposed to be a bit offset due to the triangles in the background. Is there a way to change the margin individually? I tried classes but it didn't work (nothing changed when I set the margin). I tried using two navigations as well but every time I changed the margin-bottom of the nav with "Blog" and "Kontakt", the rest got pushed further down.

Also, what's the most elegant way to place the triangle PNGs behind the links?

https://drive.google.com/open?id=0B1Zvr2H4kAyXb05Hb1hIc3R5WXM

2 Answers

ve
ve
5,048 Points
ve
ve
5,048 Points

Have you tried using the selector "li:nth-child(even)" and "li:nth-child(odd)"? "Even" selects the even elements, which are the second, the fourth, the sixth etc. while "odd" selects the odd ones, the first, third, fifth <li>-element etc.

Concerning the triangles I would try creating an after-pseudoelement for each of these links (you can also use the even- and odd-selectors) with a link to an image with a triangle.

riccarda
riccarda
6,116 Points

No, I haven't thought of that. Gonna try it out though. Thanks a lot!

riccarda
riccarda
6,116 Points
riccarda
riccarda
6,116 Points

Ok, nth-child on the li-elements of the navigation didn't work either. The margin pushes the entire navigation up which really shouldn't surprise me that much, considering that the li-elements are all inside the ul-/nav-element. Of course it effects them. Is there really no way to treat them as individual elements?