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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Mikael Enarsson
Mikael Enarsson
7,056 Points

Still just one column, but to the left, with the social media links to the right

I managed to get rid of the bullet points and float the images, but all the images are floating in a column to the left, with the footer to the right. I've looked through my code several times, but can't find where I erred. Can anyone see something?

CSS:

    /**************************
    GENERAL
    ***************************/

    body {
        font-family: 'Oswald', sans-serif;
    }

    #wrapper {
        max-width: 940px;
        margin: 0 auto;
        padding: 0 5%;
    }

    /* global links */
    a {
        text-decoration: none;
    }

    img {
        max-width: 100%;
    }

    /**************************
    Heading
    ***************************/

    #logo {
        text-align: center;
        margin: 0;
    }

    h1 {
        font-family: 'Lobster Two', cursive;
        margin: 15px 0;
        font-size: 3em;
        font-weight: normal;
        line-height: 1.1em;
    }

    h2 {
        font-size: 1.25em;
        margin: -5px 0 0;
        font-weight: normal;
    }



    /**************************
    Navigation
    ***************************/

    nav {
        text-align: center;
        padding:: 10px 0;
        margin: 20px 0 0;
    }



    /**************************
    Heading
    ***************************/

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



    /**************************
    Page: portfolio
    ***************************/

    #gallery {
        margin: 0;
        padding: 0;
        list-style: none;
    }

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

    /**************************
    Colors
    ***************************/

    /*Site body */
    body {
        background-color: #fff;
        color: #999;
    }

    /* Green header */
    header {
        background: #6ab47b;
        border-color: #599a68;
    }

    /* Nav background on mobile devices */
    nav {
        background: #599a68;
    }

    /* Logo text */
    h1, h2 {
        color: #fff;
    }

    /* Link colors */
    a {
        color: #6ab47b;
    }

    /* Nav links */
    nav a, nav a:visited {
        color: #fff;
    }

    /* Selected nav links */
    nav a.selected, nav a:hover {
        color: #32673f;
    }

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Lobster+Two:400,700italic,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <title> Legoto ne Mikael | Designer </title> </head>

    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Legato n&eacute; Mikael</h1>
                <h2>Designer</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/numbers-01.jpg">
                            <img src="img/numbers-01.jpg" alt="">
                            <p>Experimentation with color and texture.</p>
                        </a>
                        <a href="img/numbers-02.jpg">
                            <img src="img/numbers-02.jpg" alt="">
                            <p>Experimentation with color and texture.</p>
                        </a>
                        <a href="img/numbers-06.jpg">
                            <img src="img/numbers-06.jpg" alt="">
                            <p>Experimentation with color and texture.</p>
                        </a>
                        <a href="img/numbers-09.jpg">
                            <img src="img/numbers-09.jpg" alt="">
                            <p>Experimentation with color and texture.</p>
                        </a>
                        <a href="img/numbers-12.jpg">
                            <img src="img/numbers-12.jpg" alt="">
                            <p>Experimentation with color and texture.</p>
                        </a>
                    </li>
                </ul>
            </section>

            <footer>
                <a href=""><img src="img/twitter-wrap.png" alt=""></a>
                <a href=""><img src="img/facebook-wrap.png" alt=""></a>
                <p>&copy; 2014 Legato ne Mikael</p>

            </footer>
        </div>
    </body>
</html>

Any help would be very much appreciated!

If you are looking to set footer on the bottom, here's footer CSS below.

footer{
    font-size: 0.75em;
    color: #ccc;
    text-align: center;
    clear:both;   
}

Use 'Clear: both' to clear setting. ;)

Mikael Enarsson
Mikael Enarsson
7,056 Points

Not quite what I was looking for, but very nice nonetheless!

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Mikael,

You need to have your images in individual li like so:

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

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

You have one li surrounding all images.

Hope this helps.

Mikael Enarsson
Mikael Enarsson
7,056 Points

Ah, well, that's more than a bit embarrassing! I was sure it was a simple mistake, but not quite that simple. Thank you so much!!

Kenise Turnquest
Kenise Turnquest
9,391 Points

In your CSS you have the gallery li width set to 45%. Change it to 100% and that should fix it.