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!

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 Kiwi Dave
Kiwi Dave
5,541 Points

Changing the background of the footer

<h1> Hello Treehouse World </h1>

This is my first post here. So firstly Hi everyone :)

I am really struggling to put this little bit together. It may be something simple. But I just cant see it!

I have made a footer and all displays well. This is my HTML code:

  <footer>
        <a href="index.html" id="logo-footer">
          <h1>Student Name</h1>
        </a>
        <nav id="bottom-nav">
          <ul>
            <li><a href="#logo" id="top">BACK TO TOP</a></li>
            <li><a href="#portfolio-gallery" id="portfolio-bottom">Portfolio</a></li>
            <li><a href="#contact" id="contact-bottom">Contact</a></li>
          </ul>
        </nav>
        </footer>

I think connect with my CSS code: 

footer a h1 {
  display:inline;
  float: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  padding: 20px 10px;
  margin-bottom: 50px;
  margin-top: 20px;
}

#portfolio-bottom,
#contact-bottom {
  display: none;
}

#bottom-nav ul li {
  display: inline;
  float: right;
  padding: 20px 10px;
  margin-bottom: 50px;
  margin-top: 20px;
}

footer {
  background-color: d3d3d3;
}

It displays everything correctly except the background.

I have looked in developer tools and I think it is something to do with the display: inline. It removes all the background.

Any tips? Maybe I need to restructure it all?

Let me know if you can help!

Jason Anders
Jason Anders
Treehouse Moderator 145,826 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,826 Points

MOD EDIT Added markdown to code for readability in the forum.

3 Answers

Mladen Ignjatovic
Mladen Ignjatovic
13,602 Points
Mladen Ignjatovic
Mladen Ignjatovic
13,602 Points

In css file write this clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } then add your footer a class clearfix. You footer is collapsed because you have floating elements inside it. That is common behavior of elements with floating elements inside.

Jason Anders
Jason Anders
Treehouse Moderator 145,826 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,826 Points

Right... that makes much more sense. I had forgotten about collapsing elements with floats. Good Answer! :thumbsup:

Kiwi Dave
Kiwi Dave
5,541 Points

Thanks heaps for the quick answer!

I have added to the html the class see below:

 <footer class="clearfix">
        <a href="index.html" id="logo-footer">
          <h1>Student Name</h1>
        </a>
        <nav id="bottom-nav">
          <ul>
            <li><a href="#logo" id="top">BACK TO TOP</a></li>
            <li><a href="#portfolio-gallery" id="portfolio-bottom">Portfolio</a></li>
            <li><a href="#contact" id="contact-bottom">Contact</a></li>
          </ul>
        </nav>
        </footer>

and added this to the css

clearfix:after { 
  visibility: hidden; 
  display: block; 
  font-size: 0; 
  content: ""; 
  clear: both; height: 0; 
}

Still no luck though...any other clues?

Kiwi Dave
Kiwi Dave
5,541 Points

Thanks for your help Mladen,

I solved it and you put me on the right track by working out to fix a collapsed element.

I added to the css code

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

Thanks heaps for your help!!!

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,826 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,826 Points

Hey Kiwi Dave,

It's been awhile since I've done CSS/HTML, but maybe try moving your footer declaration for color to the top of the others. It may have something to do with the Cascade. I'm not sure, but...

:)