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

Paul Ferguson
PLUS
Paul Ferguson
Courses Plus Student 1,167 Points
Posted by Paul Ferguson
Paul Ferguson
Courses Plus Student 1,167 Points

I'm still seeing bullets next to my images. I can't figure out why "list-style: none;" isn't working 

/*************************
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: 20 px 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;
}

#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 */
nav {
  background: #599a68;
}

/* logo  */
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; 
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Paul Ferguson | Designer</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>Paul Ferguson</h1>
        <h2>Designer</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 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>
       </section>
       <footer>
         <a href="http://twitter/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 Paul Ferguson.</p>
       </footer>
     </div>
  </body>
</html>

3 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Paul,

A simple code typo I'm afraid, you have a ( instead of a { in your footer.

footer (
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

You may also want to add

nav li  {
  list-style: none;
}

as you have bullets there too

miikis
miikis
44,957 Points

Ha nice catch Wayne

Paul Ferguson
Paul Ferguson
Courses Plus Student 1,167 Points
Paul Ferguson
Paul Ferguson
Courses Plus Student 1,167 Points

HI Wayne,

Thanks for the "footer" error catch, I switched the bracket out. Next, I moved the "list-style: none: back up to the "#gallery" from "#gallery li" Everything works perfectly now. Seems the footer error threw it all off.

Thanks Again Paul

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Its crazy how one tiny error can mess everything up lol.

Glad your all sorted now.

miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

Gallery is not an element; it is an id. As such, it should be selected in css with a '#' preceding it. Also, I'm pretty sure the 'list-style' property should be declared on '#gallery li' and not just the entire unordered list element. Hope this helps.

Paul Ferguson
Paul Ferguson
Courses Plus Student 1,167 Points
Paul Ferguson
Paul Ferguson
Courses Plus Student 1,167 Points

Thanks Mikis,

I have a '#' before both gallery ids in the css, see below. Maybe I'm not grasping something.

I did try moving "list-style: none;" from #gallery to #gallery li as you suggested which did indeed solve the problem. However, Nick is showing it under #gallery in the video so not sure why the video doesn't match to what needs to happen for it to work. 

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

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

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}
miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

Hmm that is weird. Either it's a typo in the video... but more than likely there's just something I don't understand about inheritance, regarding the list-style property. In retrospect, I see no reason why the list-style property value wouldn't get inherited from the unordered-list. Are you sure that's what it shows in the video?

Paul Ferguson
Paul Ferguson
Courses Plus Student 1,167 Points
Paul Ferguson
Paul Ferguson
Courses Plus Student 1,167 Points

Mikis, see my above comment. The footer error seemed to be throwing it all off. Thanks again for your help