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

Jillian Skinner
Jillian Skinner
1,715 Points
Posted by Jillian Skinner
Jillian Skinner
1,715 Points

Images in one column, instead of two. I've triple-checked my work. Help!

My images are still in one column, rather than two. I've triple-checked my work, and read all of the forum answers to similar questions. What am I doing wrong?

Rich Bagley
Rich Bagley
25,869 Points

Hi Jillian,

Can you post your code please?

Add 3 back ticks (```) on the line before and 3 on the line after and it will display like this:

<div>content</div>

Thanks

-Rich

Jillian Skinner
Jillian Skinner
1,715 Points
Jillian Skinner
Jillian Skinner
1,715 Points

Here's the CSS Code: 

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


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


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

a {
    text-decoration: none; 
}

img {
  max-width: 100%;
}

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


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

h1 {
  font-family: 'Merriweather', 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;
}



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

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 {
  display: inline-block;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}




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


/* site body */
body {
  background-color: #ffffff;
  color: #999999;
}

/* 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 link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color:#32673f;

}

Here's the HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jillian Skinner | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,700italic|Oxygen' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Jillian Skinner</h1>
       <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallary">
          <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>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">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
             </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/jillianskinner"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Jillian Skinner.</p>
      </footer>
    </div>

</body>


</html>

THANK YOU!!!!!

1 Answer

huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

Heya Jillian,

Several things here...

  1. First thing you always want to check if something isn't working right is your syntax... did you leave something unclosed? Forget a semi-colon? How about a comma separator? No? Good. On to the 2nd most common error

  2. Spelling: Are my selectors spelled and cased properly? How about my property names or values... are there any spelling errors in there? In this case, you'll find within your code two errors. One is a case error and it has nothing to do with the problem you're having but it'll cause you grief later on down the line so I'll just give that one away lol. You spelled footer with all caps and that's not gonna work. The footer element is lowercase and therefore the selector must be as well. As far as your other error -- one of the things contributing to your problem here -- it's strictly spelling error. Check the elements that are giving you a problem and see if there are any misspellings in either the selector names in the CSS or ... perhaps somewhere else? (Hmmm where else could it be if not in the CSS?)

  3. Property Errors: The next thing is the obvious thing that most folks immediately check to see if there's an error with first. The problem you're having mainly, once you fix the spelling error, is that you're trying to use a full 100% width combo on your list items within the gallery and that doesn't work because of the nature of the DOM. You have width: 45% and margin @ 2.5% but a perfect 100% won't work in this instance. You'll notice that if you just change it to even slightly smaller like 2.39% it will work but not with 2.5%. They'll explain why further on in the track...

However, that's not the problem because they want that 2.5%. The problem is in your display value. Your display value is set to inline block but you don't want that in there. What you want is the float property. 

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
etc...
etc...
}

Because when you "float" something you're removing it from the normal document flow, you're able to set the width and margins to equal a full 100% because the edges of the elements are not being interfered with by the parent elements boundaries.

So there you go, a couple of answers straight out but I'd like you to go ahead and find that other error, the typo, on your own. Please post when you find it or if you're just stuck lol

Cheers,

Huck - :sunglasses:

Jillian Skinner
Jillian Skinner
1,715 Points
Jillian Skinner
Jillian Skinner
1,715 Points

Huck!!! You freakin' rock!!! Found the spelling error...good grief! lol! And fixed the other things you mentioned. Thanks a ton!

huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

Sweet! Glad to hear it and Good job! :) That was pretty quick lol.

And you're more than welcome, it's my pleasure :)

Huck - :sunglasses: