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

Posted by Said Suleiman
Said Suleiman
5,317 Points

Several Issues with my site. Please help!

Here is a snapshot of my workshop https://w.trhou.se/h8l2vaxsd1

I have the following issues.

  1. The background color in my navigation area is white instead of dark green.
  2. I still have bullet points.
  3. The images appear in a single colomn instead of two colomns.
  4. My navigation list appears in two colomns instead of single colomn.
  5. Background color in my paragraphs is white instead of grey.

I have tried my best to go through the code, and I fail to see where I go wrong. However I have discovered that issue 1 and 4 are caused by this code. When I delete the code, the problems disappears.

gallery li {

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

Please help me.

Said Suleiman
Said Suleiman
5,317 Points

Never mind guys, I found the problem. I placed the id="gallery" on the wrong ul. I placed the id under ul element within the nav element instead of the ul within the section element.

1 Answer

Radu Ioan Stochita
Radu Ioan Stochita
3,558 Points
Radu Ioan Stochita
Radu Ioan Stochita
3,558 Points

The background color in my navigation area is white instead of dark green.

You need to set the background-color for nav in your main.css. After that your code should look like this:

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

I still have bullet points.

The images appear in a single column instead of two columns.

You forgot to add the gallery id to your html. Just modify your HTML like this:

        <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 mode 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>

My navigation list appears in two colomns instead of single colomn.

Just remove the gallery id from your unordered list nested inside your nav, it should not be there. This is the correct code:

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

Background color in my paragraphs is white instead of grey.

You forgot to add the rule to set the color of your paragraphs. Just add this to your COLORS section and add whatever shade of grey you need to.

p {
  color: grey; 
}

I hope that it helps.