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

Christopher Houdlette
Christopher Houdlette
556 Points
Posted by Christopher Houdlette
Christopher Houdlette
556 Points

ID #Gallery not functioning properly

Hi! I have seen a few people post this questions as well but I'm having trouble getting my ID that I set in my HTML document transferring over and responding to the formatting changes in my main.css. I've been combing over the code for the last half hour but cannot find the issue. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chris Houdlette</title>
    <link rel="stylesheet" href="CSS/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="CSS/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Chris Houdlette</h1>
        <h2>Friend</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>
           </li>
           <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
               <p>Playing with Blending Modes</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-06.jpg">
                <img src="img/numbers-06.jpg" alt="">
                <p>80s style glow</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-09.jpg">
                <img src="img/numbers-09.jpg" alt="">
                <p>Something about Brushes</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-12.jpg">
                <img src="img/numbers-12.jpg" alt="">
                <p>Just for fun</p>
              </a>
            </li>
         </ul>
       </section>
       <footer>
          <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
          <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook      Logo"></a>
          <p> &copy; 2014 Chrissy</p>
       </footer>
     </div>
  </body>
</html>

/****************************
General
*****************************/

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

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


a {
  text-decoration: none;
  color: #6ab47b;
}

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;
}



/****************************
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 {
  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 mobile */
nav {
  background: #599a68;
}

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

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

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

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

/* site body */ 

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

Thank you for any assistance. I really appreciate the help!

Marcus Parsons
Marcus Parsons
15,719 Points

Christopher, can you edit your markdown please? Be sure to put blank lines above and below the beginning and ending blocks of code. Here is how code should look as you type it in: animated code

code

3 Answers

Adam Young
Adam Young
15,791 Points
Adam Young
Adam Young
15,791 Points

Thanks Marcus, it may be because there's a semicolon missing here:

#gallery li {

float: left; 
width: 45%; 
margin: 2.5%; 
background-color: #f5f5f5 /**Semicolon Missing **/
color: #bdc3c7;
}
Marcus Parsons
Marcus Parsons
15,719 Points

He already has that. His markdown isn't formatted properly on the forums, though, so the markdown is being rendered as a heading level element using the # sign, instead of the # sign being shown in the CSS. The # sign is attached to gallery in his CSS, though, because it is showing up as a large heading level element. The problem is not with his selector from what I can see.

Marcus Parsons
Marcus Parsons
15,719 Points

Indeed, that can definitely cause an error. Another thing that I saw was that his comment, directly underneath the comment that says "COLORS", was missing the * from both / symbols, but I was waiting to see if a mod would edit his markdown so we could see it better. Looks like that is not going to happen.

Marcus Parsons
Marcus Parsons
15,719 Points

Adam, you are correct. The semi-colon seems to the error in his CSS document causing it to go wonky! :)

Thank you, Ken Alger!

Ben Dietrich
Ben Dietrich
8,287 Points
Ben Dietrich
Ben Dietrich
8,287 Points

Christopher,

One thing that immediately jumped out at me was that you capitalized the folder name CSS in your link tag href. Is that exactly how you've named that folder? Any deviation in spelling, including capitalization, will invalidate your file path.

If that doesn't solve your issue, could you repost your css with markdown? Use the same syntax as posting html swapping in css instead. Let me know if I can help any further!

Adam Young
Adam Young
15,791 Points
Adam Young
Adam Young
15,791 Points

I noticed that too and was wondering the same thing. I think though, since some styling is being applied that he did indeed name /CSS in all caps.

Christopher Houdlette
Christopher Houdlette
556 Points
Christopher Houdlette
Christopher Houdlette
556 Points

Hi Everyone!

Sorry for the late response. Only have my late evenings for Treehouse time. Thank you everyone who contributed. It was indeed that missing semicolon. I think I just needed some time away as I had been combing through that code for a while. Thanks for helping this newbie continue learning!