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 veronica maslova
veronica maslova
1,849 Points

problem with css - beginner

Hi guys, I'm studying Front End Web Development with Nick Pettit. There's a mistake in my css code but I can't find it. I ran it in several validators and they all said it's correct. However, I can't change my gallery interface and my navigation doesn't respond to changes

Here's the code:

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

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

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

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

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

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

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

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

nav ul { list-style: none; margin: 0 10px; padding: 0; } nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

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

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

.class-icon { width: 20px; height: 20px; margin: 0 5px;

}

/****************** PAGE: PORTFOLIO *******************/

gallery {

margin: 0; padding: 0; list-style: none;
}

gallery li {

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

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #dbc3c7; }

/****************** PAGE: ABOUT *******************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

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

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

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

/green background/ nav { background: #599a68; }

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

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

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

/links color/ a { color: #6ab47b; }

2 Answers

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hi Veronica,

Is there a chance you can get us a snapshot of your project so we can check it better.

It's on your workspace upper right corner looks like a camera icon. A link of your workspace will be provided once you cliked that icon the click "Take a Snapshot". Just copy and paste it here at the forum.

Thanks!

veronica maslova
veronica maslova
1,849 Points

Yes, here it is https://w.trhou.se/ilq6dgo7cz

Owa Aquino
Owa Aquino
19,277 Points

In your problem here " However, I can't change my gallery interface and my navigation doesn't respond to changes" what are your actual goal? What you want to do with the navigation?

I have checked your codes and I can see that the issue is on the HTML file. (index.html to be precise)

You have entered the id "gallery" mistakenly in the navigation ul element instead of the section ul element.

Try updating yours:

<! Doctype HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vero Ma | TreeHouse Student</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="css/mail.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Vero Ma</h1>
        <h2>TreeHouse Student</h2>
      </a>
      <nav>
        <ul id="gallery"> //THIS WAS THE ISSUE
          <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>
          <li>
            <a href="images/numbers-01.jpg">
              <img src="images/numbers-01.jpg" alt="">
            <p>Something really beautiful</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-02.jpg">
              <img src="images/numbers-02.jpg" alt="">
              <p>Another pretty picture</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-06.jpg">
              <img src="images/numbers-06.jpg" alt="">
              <p>Look! I'm writing a code!</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://www.facebook.com/veronica.maslova.9"><img src="images/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit teacher.</p>
      </footer>
    </div>
  </body>
</html>

to mine:

<! Doctype HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vero Ma | TreeHouse Student</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="css/mail.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Vero Ma</h1>
        <h2>TreeHouse Student</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"> // SEE I MOVED THE ID HERE
          <li>
            <a href="images/numbers-01.jpg">
              <img src="images/numbers-01.jpg" alt="">
            <p>Something really beautiful</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-02.jpg">
              <img src="images/numbers-02.jpg" alt="">
              <p>Another pretty picture</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-06.jpg">
              <img src="images/numbers-06.jpg" alt="">
              <p>Look! I'm writing a code!</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://www.facebook.com/veronica.maslova.9"><img src="images/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit teacher.</p>
      </footer>
    </div>
  </body>
</html>

Hope this helps.

Cheers!

veronica maslova
veronica maslova
1,849 Points
veronica maslova
veronica maslova
1,849 Points

IT WORKED!!!!!! THANK YOU!!!!!!!!!!!!! I would never have found it!!! thank you!