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 Dan Sinclair
Dan Sinclair
1,420 Points

Simple footer not functioning when text is added

<article class="footer">

     <p class="footer-text">
       &copy; 2015 Dan Sinclair. Studio Sinclair. All rights reserved. 
     </p>

  </article>

article.footer {
    position: static;

    left: 0;
    bottom: 0;
    height: 40px;

    width: 100%;
    padding: 0;
    margin: 0;
    margin-bottom: -95px;

    box-shadow: 3px -3px 5px rgba(0,0,0,0.1);

    border-style: none;




}

article p.footer-text {
    font-family: 'Lekton', sans-serif;
    font-size: 9px;
    font-weight: 100;
    font-style: none;
    float: left;
    margin-left: 40px;

}

For some reason when I add footer text in css, my footer starts sitting behind my portfolio images on my site. However if I take out the entire footer-text rule, it seems sit perfectly on top of everything. Any suggestions?

1 Answer

Jovanny Elias
Jovanny Elias
16,204 Points

here is a guide on how to set up a simple footer. it gives you the css and html you should be using. give it a try and see if it helps if not let me know and I can help you out further. one note with HTML5 you can use the footer tag so that you do not have to use a dive or article tag. It keeps your html more clean and easier to read.

Dan Sinclair
Dan Sinclair
1,420 Points

Worked great! Thank you for the suggestions!

Jovanny Elias
Jovanny Elias
16,204 Points

Not a problem I am glad I can help.