Bullet points and other coding still wont work.

Question

I look over my doing but ever thing looks fine but the bullet points and the hover and other elements are still not working. HTML file
<li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> Experimentation with color and texture. </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> Playing with blending modes in Photoshop. </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> Trying to create an 80's style of glows. </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> Drips created using Photoshop brushes. </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> Creating shapes using repetiton. </a> </li> CSS FILE /********************** PAGE:PORTFOLIO **********************/

gallery {

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

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

Can you see and tell me what i did wrong?

Answer 1 · 2016-01-15T00:03:40Z

January 15, 2016 12:03am

Hi, looks like you're missing a top <li>, and also the opening and closing <ul> and </ul> tags.

Try this:

<ul class="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 repetiton.</p>
        </a>
      </li>
</ul>

The other thing you're missing is the "." before "gallery" in your css file:

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

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

Hope this helps.

Answer 2 · 2016-01-15T03:34:11Z

January 15, 2016 3:34am

Hi Nick,

I'll break your question up into a few sections - I ran into a couple of these myself. It might be advantageous to show us your full HTML page. Hope this helps!

I was having a look at the code you copied from your main.css page. I noticed you left out the # symbol prior each gallery .... try replacing your CSS with this...

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

#gallery li { float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
Check your CSS for the hover section... it should look like this...
```
nav a.selected, nav a:hover {
     color: #AE61FA;
  }
```

Since you haven't shown us your HTML for your nav section, we can't see if you've correctly named your nav anchors. It might help if you show us your nav section on your HTML page...it should read something similar to this....

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

Welcome to the Treehouse Community

Looking to learn something new?

Nick Hopkins

Nick Hopkins

Bullet points and other coding still wont work.

gallery {

2 Answers

Jon Roobottom

Jon Roobottom

jamied

jamied