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 Eric Hansen
Eric Hansen
Courses Plus Student 2,254 Points

Images not appearing in two columns AND bullet points not going away

Hi.. my images are not displaying in two columns and bullet points are still appearing. What am I doing wrong?

============Index.html=============

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Eric Hansen | Pokemon Master</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> Eric Hansen </h1>
    <h2> Pokemon Master </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 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 repitition.</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; 2014 Eric Hansen.</p>
  </footer>
</div>

</body> </html>

============Main.css=============

/*************************************** 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%; /*keeps images in their containers */ }

/*************************************** 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.75em; text-align: center; padding-top: 50px; color: #ccc; }

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

gallery {

margin: 0; padding: 0; list-style: none; /* removes bullet points from list */ }

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

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

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

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

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

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

3 Answers

James Best
James Best
11,112 Points
James Best
James Best
11,112 Points

Hey Eric,

If the CSS you have posted is the exact css you are using in your code it appears that you are missing the class/id tags.

Notice I have added the # symbol. This applies the styles to the id. It is the same with the li tags.

 #gallery {

            margin: 0; padding: 0; list-style: none; /* removes bullet points from list */
   }

When writing the css selectors make sure you include the id(#) and class(.) before the selectors.

I hope this helps

James

Alasdair Maclean
Alasdair Maclean
3,818 Points
Alasdair Maclean
Alasdair Maclean
3,818 Points

You ended your "div id" in the wrong place. It should end after "/section" closing tag and not after the footer closing tag.

         </ul>
      </section>
    </div><!-- End/wrapper div -->

      <footer>
        <a href="http://twitter.com/#">
          <img src="img/twitter-wrap.png" alt="Twitter Logo">
        </a>
        <a href="http://facebook.com/#"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2015 Alasdair Maclean</p>
      </footer>

</body>
</html>
abdi ali
abdi ali
1,966 Points
abdi ali
abdi ali
1,966 Points

your are missing # to target the id gallery