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
Curtis Williams
2,563 PointsNot sure how to select the list items in .footer-nav
Am I selecting the list items in .footer-nav correctly here? Am I close? Thanks!
/* Complete the challenge by writing CSS below */
.clearfix::after {
content: "";
display: table;
clear: both;
}
.footer-nav {
float: left;
li {
float: none;
}
}
.logo{
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Getting Started with CSS Layout</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<footer>
<img class="logo" src="city-logo.svg" alt="logo">
<ul class="footer-nav">
<li><a href="#">Ice cream</a></li>
<li><a href="#">Donuts</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
<p class="copyright">©2015 The Best City.</p>
</footer>
</div>
</body>
</html>
7 Answers
Matthew Agosto
14,807 PointsBe careful with how you are setting up your CSS. In the form that you wrote it, it is in the form of SCSS or Sass. It's a way to precompile CSS using programmatically similar structuring. To target the <li> you want to do something like
.footer-nav { float: left; }
.footer-nav li { background-color: red; float: none; }
I added the background color to highlight the box that the elements are in so you can see.
Also be careful with how floats behave. If you are working through the front-end track, you will hit the sections that talk about how floats can behave oddly. I took your code and opened it in a browser and can see that the Copyright section is not in the position you probably want. I will let you play around with that on your own as this should help you solve your current issue.
Jon Bascos
15,445 PointsTo select the "list items" in .footer-nav, you would select it as ".footer-nav li {}" .
Miloslav Cvetkovic
4,714 PointsTry this:
.footer-nav { float: left; }
.footer-nav li { float: none; }
Think of the <li> tag as a "child" of the <ul> , so in order to select the <li> you need first to select <ul> that its in this case the "parent" , and after that add <li>.
Mihail Mitrevski
Full Stack JavaScript Techdegree Student 8,430 PointsAs i can see because the "li" items have anchor children you can select them with .footer-nav li a{},or more simple .footer-nav a and that's it:D
Curtis Williams
2,563 PointsMaybe I'm still not understanding what I'm doing wrong. I've tried all of these options and still no luck. Maybe I'm missing something else?
Matthew Agosto
14,807 Pointswhat is it exactly what you want to do in terms of how it's styled? I tried it in my browser and it does target the <li> elements. You can also target the <a> elements that are inside them by saying .footer-nav li a {} as mentioned in another comment.
If you are doing this is a browser window as well, make sure that you hard refresh your page. It might not be showing the up to date version as it might be cached. You can do Ctrl+R and that should do it, or open the google dev window and then you can right click on the refresh arrow in your browser to select hard refresh.
Also make sure all of your semi colons and brackets are closed and ended correctly. A small error like that won't give you feedback that it is incorrect, and will compile it as is. It will then not do what you want it to do.
Mihail Mitrevski
Full Stack JavaScript Techdegree Student 8,430 PointsDepends on what are you trying to do with these list items..if you want to style them use :
.footer-nav li a {},it must work like these..or something like li > a(direct child of an element)...anchor(link) elements are wrapped up into the <li> elements and is obvious that you can't select Li elements on their own .
If you want to move whole list or interact with their position you can select <ul> element as their container and float or whatever you want.
Mihail Mitrevski
Full Stack JavaScript Techdegree Student 8,430 PointsYou can select also with JS/Jquery like $('.footer-nav li a'), wrapped these into a variable and lopp trough the list with each() method :)