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 Image Captions

Tim Callan
Tim Callan
24,230 Points
Posted by Tim Callan
Tim Callan
24,230 Points

Gallery margin, padding, font size and color do not change using this css code.

As several others have stated, this does not seem to work.

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

Everything remains the same.

Tim Callan
Tim Callan
24,230 Points
Tim Callan
Tim Callan
24,230 Points

This was input as:

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; } but was changed when posted

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Tim,

Could you post a snapshot of your workspace?

https://teamtreehouse.com/forum/workspace-snapshots

6 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Tim,

This link will show you how to post code properly in the forums: https://teamtreehouse.com/forum/posting-code-to-the-forum

I went ahead and fixed your css and html that you've posted.

One thing I've noticed is that each one of your images is missing the right angle bracket on the end.

<img src="img/numbers-01.jpg" alt=""

Try adding that bracket at the end for all 5 and let us know if there's still a problem.

Later on you will learn about the validators at the W3C and it will help you catch errors like that.

Juan Aviles
Juan Aviles
12,795 Points
Juan Aviles
Juan Aviles
12,795 Points

Hey Tim,

What exactly are you targeting with "gallery"? Is this a class or ID? I don't remember this course exactly so you will have to forgive my ignorance.

~Juan

Tim Callan
Tim Callan
24,230 Points
Tim Callan
Tim Callan
24,230 Points

Hi Jaun, It's an ID.

Juan Aviles
Juan Aviles
12,795 Points
Juan Aviles
Juan Aviles
12,795 Points

Hey Tim,

For ID's, your CSS needs to target your element with a hashtag like #gallery.

http://www.w3schools.com/cssref/sel_id.asp

Tim Callan
Tim Callan
24,230 Points
Tim Callan
Tim Callan
24,230 Points

Hi Jason, I'm using Espresso instead of Workspaces because I like to use the right-click contextual menu to be able to cut and paste. (Workspaces doesn't seem to use this.) Here is a copy from Espresso.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sunrise Mountain Works | Art and Adventure</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">  </head>
    <body>
      <header>
        <a href="index.html" id="logo">
        <h1>Sunrise Mountain Works</h1>
        <h2>Art and Adventure</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 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/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" /></a> 
                    <p>&copy; 2015 Sandra Callan.</p>
          </footer>
      </div>
  </body>
</html>
Tim Callan
Tim Callan
24,230 Points
Tim Callan
Tim Callan
24,230 Points

Hi Juan, It actually does use the # directly before gallery without spaces. When I copy and paste in this question area, it shows everything just as I paste. However, when it shows up in this forum after I post, the # is stripped out.

Tim Callan
Tim Callan
24,230 Points
Tim Callan
Tim Callan
24,230 Points

Hi Jason, The missing right angle bracket was the problem. Adding that to the 5 images did fix the problem. Thank you so much!