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

HTML How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Posted by Holly Williford
Holly Williford
4,745 Points

My social icons are inline with my portfolio images. What do I need to do to move them below the images?

For some reason my social media icons are not at the bottom of the page. Rather they are right next to the 5th image in the portfolio. How can I move them to the bottom of the page?

Thanks,

Holly

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hi Holly,

Could you post your code? It's impossible to guess what's wrong without seeing it.

Cheers,

-Greg

Steven Parker
Steven Parker
229,708 Points
Steven Parker
Steven Parker
229,708 Points

You could make a snapshot of your workspace and post the link to that.

4 Answers

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Holly,

I loaded your code and looked around and compared it with Nick's in the lesson.

You're missing your clear declaration in your css footer rule, which is why the footer is flowing around the left floated gallery.

Add this declaration to your footer rule and it will line up properly:

clear: both;

Good luck with the project!

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Holly,

If you're wondering how to post code to the forums or share a workspace, here are some instructions:

How to Post Code on the Forums

There are two ways to share your code on the forums here, excluding using external tools from outside of Treehouse.

Method One

The first method is to use a series of three ` (backticks, located at the top left of the keyboard) without any spaces on one line, paste all of your code starting on the second line, then closing the code block with a second series of three backticks. Take a peek at the link for the "Markdown Cheatsheet" located above the "Post Answer" button anytime you're about to post a comment or answer. Using this method, the code will look like this:

```css
(code here)
```

Method 2

The second method is a little more convoluted, but it lets us look at your entire project and make our own copy to try fixing issues. I'll order the steps since it can be a little confusing the first time around:

  1. Open the workspace you're having trouble with.

  2. On the menu bar located to the left of the "Preview Workspace" button is the "Snapshot Workspace" (camera icon), click that.

  3. A popout will appear with another button that says "Take Snapshot", click that.

  4. It should create a new snapshot, which will appear beneath the "Take Snapshot" button in the popout. Click the snapshot you want to share.

  5. The snapshot should open a new browser tab. Highlight the url in the snapshot's browser tab (it should look like this: https://w.trhou.se/ducj79b1i0 ).

  6. Create your forum post and paste the snapshot's url into the post. Other Treehouse users will be able to open the snapshot, then 'fork' a new copy to check out.

Keep in mind that you can only ever have five snapshots, but you can delete them by hovering over the snapshot located below the "Take Snapshot" button in the popout and click the trash bin icon.

Good luck!

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hey Daniel,

FYI, you can include back tics in the forums, you just need to escape each of them with a backslash: \`. (Note: to do what I just did, you need two backslashes :).

```example.css

[your code here]

```

Cheers,

-Greg

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Greg,

Thanks for the heads up. I've been evolving this post over the past few days and I think that pretty much completes it.

I'd give you an upvote if it allowed me to, but this one will need to be in spirit.

Thanks again!

Holly Williford
Holly Williford
4,745 Points
Holly Williford
Holly Williford
4,745 Points

Hello! Sorry, I thought the problem was fairly simple. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>Holly Williford | Web Developer</title>
        <link rel="stylesheet" href="CSS/normalize.css"> 
         <link rel="stylesheet" href="CSS/main.css">  
        <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>

    </head>
    <body>
        <header>
            <a href="index.html" id="logo">
            <h1>Holly Williford</h1>
            <h2>Web Developer</h2>
            </a>
            <nav>
                <ul>
                <li><a href="index.html" class="selected">Portfolio</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div id="wrapper">
            <section>
                <ul id="gallery">

                      <li>

                      <a href="IMG/number-01.jpg">
                      <img src="IMG/numbers-01.jpg" alt="">                  
                        <p>Experimentation with color and texture</p>
                    </a>
                    </li>
                      <li>

                      <a href="IMG/number-02.jpg">
                      <img src="IMG/numbers-02.jpg" alt="">                  
                        <p>Playing with blending modes in Photoshop</p>
                    </a>
                    </li>
                      <li>

                      <a href="IMG/number-06.jpg">
                      <img src="IMG/numbers-06.jpg" alt="">                  
                        <p>Trying to create 80's styles of glows </p>
                    </a>
                    </li>
                      <li>

                      <a href="IMG/number-19.jpg">
                      <img src="IMG/numbers-09.jpg" alt="">                  
                        <p>Drips with Photoshop brushes</p>
                    </a>
                    </li>
                      <li>

                      <a href="IMG/number-12.jpg">
                      <img src="IMG/numbers-12.jpg" alt="">                  
                        <p>Creating Shapes with Reptition</p>
                    </a>
                    </li>
                </ul>
            </section>
             <section> 
            <footer>

                <a href="https://twitter.com/HWilliford"><img src="IMG/twitter-wrap.png"     alt="Twitter Logo" class="social-icon"></a>
                <a href="https://www.facebook.com/holly.smells"><img src="IMG/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
                <p>&copy; 2016 Holly Williford.</p>
            </footer>
            </section>
        </div>
    </body>
</html>


The CSS: 


/*******
footer 
******/

footer {
  font-size: .75em; 
  text-align:center; 
  padding-top; 50px; 
  color: #ccc;
}

.social-icon {
  width: 20px; 
  height: 20px; 
  margin: 0 5px; 
}


/*********
Page: Portfolio
***********/
#gallery {
 margin: 0; 
 padding: 0; 
 list-style: none; 
}

#gallery li {
  float: left; 
  width: 45%; 
  margin: 2.5%;
  background-color: #f5f5f5; 
  color: #bdc3c7; 

}
 #gallery li p a p {
 margin: 0; 
 padding: 5%; 
 font-size: 0.75em; 
 color: #bdc3c7; 
}
Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hey Holly,

Glad someone was able to help out :). You were right - it was fairly simple. That said, it is always helpful to see your code. The same bug can be caused by any number of causes, so it's almost always necessary to see the code in order to diagnose the issue.

Happy coding!

-Greg

Holly Williford
Holly Williford
4,745 Points
Holly Williford
Holly Williford
4,745 Points

Thanks so much!