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 corey plummer
corey plummer
1,584 Points

Layout Issues

I am having some issues right now with layout issues. Currently, I am following along in the How to Build a Website track. As far as I'm aware, I've done everything correctly. What I'm having issues with is something seems to be off.

In the course we just got to the point, where we've floated the material on the page, so that the pics should be in to columns side by side. However, mine seem to not be exactly side by side (when you minimize the window to mobile screen size).

If anyone could help me figure this out. that would be perfect. I've endlessly searched and can't figure it out.

Corey

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Corey's Page | Coffee Enthusiast</title>
        <link rel="Stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
        <link rel="Stylesheet" href="css/main.css">
        <!--<style>
            nav a {color: white;
                    background-color: orange; 

            }
         This is a comment. This is disabled. It shows how to style 
         CSS via inside HTML

         </style> -->
    </head>
    <body>

    <header>
        <a href="index.html" id="logo">
            <h1> Corey Plummer </h1>
            <h2> Yummy Coffee</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">

                <a href="img/numbers-01.jpg">
                    <li><img src="img/numbers-01.jpg" alt=""></li>
                    <p>Expermentation with color</p>
                </a>
                <a href="img/numbers-02.jpg">
                    <li><img src="img/numbers-02.jpg" alt=""></li>
                    <p>Playing with blending modes in photoshop.</p>
                </a>
                <a href="img/numbers-06.jpg">
                    <li><img src="img/numbers-06.jpg" alt=""></li>
                    <p>Trying to create an 80's style of glows.</p>
                </a>
                <a href="img/numbers-09.jpg">
                    <li><img src="img/numbers-09.jpg" alt=""></li>
                    <p>Drips created using photoshop brushes.</p>
                </a>
                <a href="img/numbers-12.jpg">
                    <li><img src="img/numbers-12.jpg" alt=""></li>
                    <p>Creating shapes using repetition.</p>
                </a>
            </ul>
        </section>  
        <footer>
            <a href="https://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
            <a href="https://www.facebook.com/corey.plummer"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
            <p>&copy; 2015 Corey Plummer.</p>
        </footer>
    </div>


    </body>

</html>

```html

```css
/****************
   General
****************/
body {
    font-family: 'Open Sans' , sans-serif;
}


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

    /* #hover. # is the sign for an ID. an ID
    is unique to only one property */
}


a {text-decoration: none;}


img {
    max-width: 100%;
}




/****************
       HEADING
****************/

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

}

h1 {font-family: 'Changa One' , sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;

}

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


}



/****************
   NAVIGATION
****************/

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

}





/****************
 Page:Portfolio
****************/

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

}

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

/****************
   FOOTER
****************/

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

}



/****************
     COLORS
****************/


  /* SITE BODY */

body {
    background-color: #fff;
    color: #999;
}


/* GREEN HEADER */

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

/* Nav Background on Mobile */

 nav {
    background: #599a68;
} 



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

/* Links */
a {
    color: #6ab47b;
}


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

/* selected nav links */
nav a.selected, nav a:hover {
    color: #32673f;
    /* .selected is a class. Classes can be applied to multiple
    things. */
}

```css

2 Answers

David Chordigian
David Chordigian
Courses Plus Student 12,990 Points

Hey Corey,

After reviewing your code, it looks like this might be due to where you're placing the <li> tags in the <ul> gallery.

Your Code right now is:

<section>
            <ul id="gallery">

                <a href="img/numbers-01.jpg">
                    <li><img src="img/numbers-01.jpg" alt=""></li>
                    <p>Expermentation with color</p>
                </a>
                <a href="img/numbers-02.jpg">
                    <li><img src="img/numbers-02.jpg" alt=""></li>
                    <p>Playing with blending modes in photoshop.</p>
                </a>
                <a href="img/numbers-06.jpg">
                    <li><img src="img/numbers-06.jpg" alt=""></li>
                    <p>Trying to create an 80's style of glows.</p>
                </a>
                <a href="img/numbers-09.jpg">
                    <li><img src="img/numbers-09.jpg" alt=""></li>
                    <p>Drips created using photoshop brushes.</p>
                </a>
                <a href="img/numbers-12.jpg">
                    <li><img src="img/numbers-12.jpg" alt=""></li>
                    <p>Creating shapes using repetition.</p>
                </a>
            </ul>
        </section>

And what it should be is:

<section>
            <ul id="gallery">

                <li>
                    <a href="img/numbers-01.jpg">
                        <img src="img/numbers-01.jpg" alt="">
                        <p>Expermentation with color</p>
                    </a>
                </li>
                <li>
                    <a href="img/numbers-02.jpg">
                        <img src="img/numbers-02.jpg" alt="">
                        <p>Playing with blending modes in photoshop.</p>
                    </a>
                </li>
                <li>
                    <a href="img/numbers-06.jpg">
                        <img src="img/numbers-06.jpg" alt="">
                        <p>Trying to create an 80's style of glows.</p>
                    </a>
                </li>
                <li>
                    <a href="img/numbers-09.jpg">
                        <img src="img/numbers-09.jpg" alt="">
                        <p>Drips created using photoshop brushes.</p>
                    </a>
                </li>
                <li>
                    <a href="img/numbers-12.jpg">
                        <li><img src="img/numbers-12.jpg" alt="">
                        <p>Creating shapes using repetition.</p>
                    </a>
                </li>
            </ul>
        </section>

This should fix your problem.

-David

corey plummer
corey plummer
1,584 Points

Seriously. Thank you so much. I was rewatching every video to figure this out.

So, my links and everythign have to be inside the <li></li> tags?

Do you know why doing it the way I did it, made such a difference?

Jonathan Ankiewicz
Jonathan Ankiewicz
17,901 Points

Corey plummer,

Think of the li's a box, you tried to arrange all your items in the box, but you left your p tags and text out side of the box. That's why you couldn't get it to look good inside the box.

David Chordigian
David Chordigian
Courses Plus Student 12,990 Points

It had to do with the way you nested the <li> tag inside of the <ul> tag itself. If your adding items into a html "list," every new item you want to have added, must be inside a <li> tag. No html tags can be outside of the <li>.

Example:

<ul>
  <li>Item Here 1</li>
  <li>Item Here 2<li>
</ul>

Take a look at this video it will explain better then me typing it out. Video Link: https://teamtreehouse.com/library/html/lists/html-lists-ordered-and-unordered

Jonathan Ankiewicz
Jonathan Ankiewicz
17,901 Points
Jonathan Ankiewicz
Jonathan Ankiewicz
17,901 Points

If I understand your question correctly, you can't get the text to align with the image. Using the float left.

Assuming I understand the questions, you need to place you p tags with text into the <li>'s they are out side of each other right now.

so it looks like. <li> img</li> <p>now all of your text</p>

it needs to look like:

<li> <img><p>now all of your text</p></li>