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

Anna Benson
Anna Benson
2,728 Points
Posted by Anna Benson
Anna Benson
2,728 Points

Pictures not showing up in 2 columns when I resize my browser; still have bullet points next to pictures

HMTL Code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Anna Benson | Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body>
<header> <a href="index.html" id="logo"> <h1>Anna Benson</h1> <h2>Developer</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 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 id="gallery"> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80s style of glows.</p> </a> </li> <li id="gallery"> <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/annawbens"><img src="img/twitter-wrap.png" alt="Twitter logo"></a> <a href="http://facebook.com/abenson1991"><img src="img/facebook-wrap.png" alt="Facebook logo"></a> <p>© 2016 Anna Benson.</p> </footer> </div> </body> </html>

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

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

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; font-weight: normal; }

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

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

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

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

}

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

gallery {

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

gallery li {

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

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

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

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

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

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

/* nav background on mobile*/ nav { background: #599a68; }

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

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

4 Answers

Anna Benson
Anna Benson
2,728 Points
Anna Benson
Anna Benson
2,728 Points

I should note that I changed my ul class to an id and it still did not work.

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I think your problem might be that you have both a class and an id named "gallery". But an id is unique and can be applied only to one element per page. You've listed it here multiple times. My suggestion is to first change the lines that read id="gallery" to class = "gallery".

Change this:

<li id="gallery">

to this:

<li class="gallery">

and see if it doesn't fix things up!

Anna Benson
Anna Benson
2,728 Points
Anna Benson
Anna Benson
2,728 Points

Still not working. I updated it:

<div id="wrapper">
  <section>
    <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 80s 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>
Anna Benson
Anna Benson
2,728 Points
Anna Benson
Anna Benson
2,728 Points

Ok, never mind! It somehow got resolved :)