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 CSS Layout Basics Page Layout with the Float Property Footer Layout with Floats

Curtis Williams
Curtis Williams
2,563 Points

Not 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!

style.css
/* Complete the challenge by writing CSS below */



.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.footer-nav {
  float: left;
  li {
   float: none; 
  }
}

.logo{
  float: right;
}
index.html
<!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">&copy;2015 The Best City.</p>
        </footer>
    </div>
    </body>
</html>

7 Answers

Matthew Agosto
Matthew Agosto
14,807 Points

Be 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.

To select the "list items" in .footer-nav, you would select it as ".footer-nav li {}" .

Miloslav Cvetkovic
Miloslav Cvetkovic
4,714 Points

Try 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Mihail Mitrevski
Full Stack JavaScript Techdegree Student 8,430 Points

As 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
Curtis Williams
2,563 Points

Maybe 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
Matthew Agosto
14,807 Points

what 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Mihail Mitrevski
Full Stack JavaScript Techdegree Student 8,430 Points

Depends 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Mihail Mitrevski
Full Stack JavaScript Techdegree Student 8,430 Points

You can select also with JS/Jquery like $('.footer-nav li a'), wrapped these into a variable and lopp trough the list with each() method :)