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 Style the Portfolio

Posted by Steven Graham
Steven Graham
10,663 Points

Background Color issues

gallery li {

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

The background color line isn't taking effect on my page; the background still appears white. I've checked through normalize and main.css files for any possible cascading issues, But I can't figure out what could be wrong

3 Answers

Conrad Turuk
Conrad Turuk
5,144 Points
Conrad Turuk
Conrad Turuk
5,144 Points

I can't see your code, but do you have images incorporated into your <li> elements already? If so, the images might be covering up the background color.

If you are trying to change the color and background color of the <p> captions below the image, you would need to target:

gallery li p {}

OR, if you wanted to change the background color behind all of the <li> elements (images and captions), then you would need to target:

gallery {}

Give that a shot and see what happens.

Steven Graham
Steven Graham
10,663 Points
Steven Graham
Steven Graham
10,663 Points

This is my CSS

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

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

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 1em;
  font-family: 'Chewy', sans-serif;
}

and this is my HTML

  <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/Propress1.jpg">
              <img src="img/Propress1.jpg" alt="">
              <p>Steven, Putt and Bobo sitting on the couch</p>
            </a>
          </li>
          <li>
            <a href="img/Propress2-2.jpg">
              <img src="img/Propress2-2.jpg" alt="">
              <p>Steven, Putt and Bobo sitting on the couch in darker lighting</p>
            </a>
          </li>
          <li>
            <a href="img/Propress3.jpg">
              <img src="img/Propress3.jpg" alt="">
              <p>Steven, Putt and Bobo sitting at a table</p>
            </a>
          </li>
          <li>
            <a href="img/Propress4.jpg">
              <img src="img/Propress4.jpg" alt="">
              <p>Steven, Putt and Bobo having a good laugh</p>
            </a>
          </li>
          <li>
            <a href="img/Propress invert1.jpg">
              <img src="img/Propress invert1.jpg" alt="">
              <p>Steven, Putt and Bobo standing out front of the venue; inverted</p>
            </a>
          </li>
        </ul>
      </section>

The background boxes surrounding the <p> descriptions of the photos and the borders around them are still just a plain white though. I've experimented with every color under the sun other than just the hex for gray too though. It's as if it can't be changed.

Conrad Turuk
Conrad Turuk
5,144 Points
Conrad Turuk
Conrad Turuk
5,144 Points

Move the background-color from "#gallery li" to "#gallery li p"

Steven Graham
Steven Graham
10,663 Points
Steven Graham
Steven Graham
10,663 Points

It still didn't seem to change anything. I'm not sure what's going on. I tried looking at the page through the developer tools, but still couldn't seem to find any bugs or issues that could be causing the strange anomaly.

Conrad Turuk
Conrad Turuk
5,144 Points
Conrad Turuk
Conrad Turuk
5,144 Points

Hi Steven,

I did get the css properties to apply; however, I would check the link element in your initial HTML file. The code you provided did not include the starting HTML elements such as !DOCTYPE, meta, head, link, etc. I would go back to your html and double check those elements were coded correctly.

In regards to linking your main.css file to your html, it is important to note that the href is CaSE sensitive.

<link rel="stylesheet" href="CSS/main.css">   

     OR

<link rel="stylesheet" href="css/main.css">

In the code above, the case sensitivity of the "css" folder must match the case sensitivity of the href location. Let me know if this helps you at all.