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 Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points

Why doesn't my bullet list fade away?

/****************
Page: Portfolio
****************/
#gallary {
  margin: 0;
  padding: 0;
  list-style:none;  /* this removes the bullet points from the list */
}

this is my code but on my website the bullet points are going away

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Rutwik,

I went ahead and edited your posts so that it's easier to read all of your code. When posting code, make sure to put 3 backticks (left of the 1 on your keyboard) before and after your code.

4 Answers

Ricky Sparks
Ricky Sparks
22,249 Points
Ricky Sparks
Ricky Sparks
22,249 Points

Did you link your (css file to the file with the bullet point code)
(usually html file doesn't have code that links to css file)

Khaleel Hamid
Khaleel Hamid
5,258 Points
Khaleel Hamid
Khaleel Hamid
5,258 Points

This should be your HTML

<ul id="gallery">

All your images, text and etc

</ul>

and CSS

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

Should work. Do you have your CSS linked to your HTML?

<link rel="stylesheet" href="css/main.css">
Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points

Yeah that's what i have, i'll comment both my .html and .css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Rutwik Patel Programmer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic|Yanone+Kaffeesatz:400,700,300' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css">

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Rutwik Patel</h1>
        <h2>Programmer</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.hmtl"> Contact </a></li>
        </ul>


   </nav>
        </header>
    <div id="rapper"> 
    <section>
                <ul id="gallery">
                   <li>
                     <a href="img/numbers-01.jpg">
                       <img src="img/numbers-01.jpg" alt="">
                         <p> "Experimentation" </p>
                       </a>
                  </li>
                       <li>
                     <a href="img/numbers-02.jpg"></a>
                       <img src="img/numbers-02.jpg" alt="">
                         <p> "Playing with photoshop" </p>
                  </li>
                       <li>
                     <a href="img/numbers-06.jpg"></a>
                       <img src="img/numbers-06.jpg" alt="">
                         <p> "80's style of glow" </p>
                  </li>

                      <li>
                     <a href="img/numbers-09.jpg"></a>
                       <img src="img/numbers-09.jpg" alt="">
                         <p> "Drips created using photshop brushes" </p>
                  </li>
                       <li>
                     <a href="img/numbers-12.jpg">
                       <img src="img/numbers-12.jpg" alt="">
                         <p> "Creating shapes Using Repitiion" </p>
                       </a>
                  </li>                   
                 </ul>
             </section>
        <footer>
           <a href="http://twitter.com"> <img src= "img/twitter-wrap.png" alt="Twitter logo"> </a>
             <a href="http://facebook.com/deadxskillz">  <img src="img/facebook-wrap.png" alt="Facebook Logo"> </a> 
          <p>&copy; 2014 Rutwik Patel.</p>
        </footer>
      </div>
  </body>
</html>

/***************
GENERAL
****************/

body {
 font-family: 'Open Sans', sans-serif;

}

#rapper {
  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: 'Yanone Kaffeesatz', 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
****************/
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
}


#gallery li a p {
margin:0;
  padding: 5%;
  font-size:.75em;
  color:#bdc3c7
}

}

/***************
COLOR
****************/

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



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


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

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

}


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


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


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


/* site body */
body {
  background-color: #fff;
  color:#999
}
Khaleel Hamid
Khaleel Hamid
5,258 Points

I'm only seeing bits of your HTML need to see more and post the CSS in the same format.

Khaleel Hamid
Khaleel Hamid
5,258 Points

I'm not sure if its because you post it here, but it seems your formatting is off in the HTML. Also space out the left in gallery li and 0 and the color in gallery li a p in CSS.

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

A couple of issues with your css:

  • In your Footer section, you never actually declare a selector. You should declare footer and open it with a left curly brace ({).
  • In your #gallery li, #gallery li a p, body, and again...body rules, you've forgotten the semi-colon at the end of your color declarations.
  • There's an extra right curly brace (}) before your COLOR block.
  • You have an extra body rule at the bottom of the file.
  • You've written a rule for #gallery li a p, but I don't see anywhere in your code that you've nested a p tag inside of an a tag. Maybe you meant for this to be #gallery li a, #gallery li p?

One of the missing semi-colons or misplaced curly braces could have caused this. Try cleaning up these issues real quick and see if that solves your problem.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

I also just noticed that in your h2 rule, you have a space between 0. and 75em in your font-size. This will also cause problems.

Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points

that took care of everything! Thank you

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Glad I could help!

Khaleel Hamid
Khaleel Hamid
5,258 Points
Khaleel Hamid
Khaleel Hamid
5,258 Points

I believe you spelled gallery wrong. You have gallary when it should be gallery.

and it should be

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points

but i spelled it gallary* when i assigned the class.. so it shouldn't matter but i fixed.. it still won't fade away