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 Customizing Colors and Fonts Organize CSS with Comments

Posted by karthikkn
karthikkn
5,397 Points

to remove dots in listed items

code for html

<code> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>| Webdesigner</title> <link rel="stylesheet" href="normilize.css"> <link rel="stylesheet" href="main.css"> </head>

<body> <header> <a href="index.html" id="logo"> <h1>Karthik gallery</h1> <h2> Designer</h2> </a>

<nav>
<ul>
    <li>
        <a href="#" class="selected"> portfolio</a>  
    </li>
    <li>
        <a href="#"> About</a>  
    </li>
      <li>
        <a href="#"> Contact</a>  
    </li>
</ul>

</nav>

</header> <div id="wrapper">

    <section>
      <ul>
        <li>
          <img src="numbers-01.jpg" alt="">
        </li>
        <p>This is first photo</p>
        <li>
          <img src="numbers-02.jpg" alt="">
        </li>
        <li>
          <img src="numbers-06.jpg" alt="">
        </li>
        <li>
          <img src="numbers-09.jpg" alt="">
        </li>
        <li>
          <img src="numbers-12.jpg" alt="">
        </li>
      </ul>
      <p> Karthik is learning webdesigning</p>
    </section>
    <footer>
        &copy; karthik
        <a href="http://facebook.com/"><img src="facebook-wrap.png" alt="facebook"></a>
        <a href="http://twitter.com/"><img src="twitter-wrap.png" alt="twitter"></a>
    </footer>

</div> </body> <html>

</code> This the code for css

<code> a {

text-decoration:none;

}

wrapper {

max-width:940px; margin:0 auto; padding:0 5%; }

logo {

text-align:center; margin:0;

} a { color:#6ab47b; } header { background:#6ab47b; border-color:#599a68;

} h1, h2 { color:#fff; } nav { background:#599a68; } nav a , nav a :visited { color:#fff; } nav a.selected , nav a:hover{ color:#32673f; } body { background-color:#fff; color:#999; }

</code>

7 Answers

Joe Ainsworth
Joe Ainsworth
13,588 Points
Joe Ainsworth
Joe Ainsworth
13,588 Points

You will need to add styling to the unordered list using the following;

ul { list-style-type: none }

If you only want a particular element to have no bullets you can add a class. e.g.

ul.no-bullet { list-style-type: none }

Then apply this class to the unordered list by using the .no-bullet. e.g.

<ul class="no-bullet"> <li>Test</li> </ul>

karthikkn
karthikkn
5,397 Points

I have tried your suggestion it works well, But nick has not written this code any where in his explanation , how did he overcome this problem. Once again thank you.

Jason Montoya
Jason Montoya
6,550 Points
Jason Montoya
Jason Montoya
6,550 Points

Karthik,

Instead of trying to style the anchor element, you need to style the list item instead. Something like this:

ul {
list-style: none;
}

Hope this helps.

Rachman Walker
Rachman Walker
12,517 Points
Rachman Walker
Rachman Walker
12,517 Points

Hi Karthik,

My apologies for not responding sooner. However, you have received two very good answers from the members above. I concur that

ul { list-style-type: none }

should remove the dots

I believe that Nick may have omitted this due to time constraints during the original filming of the video. Keep learning and feel free to reach out if you have any more questions.

Cheers! Rachman

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Karthik,

I'm not sure if you're talking about the bullets on your gallery items or bullets in your navigation.

At this point in time you should still have bullets in your gallery but no bullets in the nav.

The normalize.css file that comes with this project will remove bullets from navigation lists.

When you progress farther to this video: http://teamtreehouse.com/library/how-to-make-a-website/styling-web-pages-and-navigation/style-the-portfolio

NIck writes the css to remove the bullets from the gallery.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

For future reference,

The older version of normalize that comes with this project will remove bullets from lists within the nav element.

You can see the css for that beginning on line 316 here: normalize v1.1.3 This is the version that comes with the project zip file.

The newest version of normalize doesn't remove any bullets at all.

karthikkn
karthikkn
5,397 Points
karthikkn
karthikkn
5,397 Points

Thank you for all the members how have answered to my problem that i am facing.

nvcxnvkldsjaklfds
PLUS
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points
nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

I see you have already got the answer you want. But the easiest way will be setting html ul element display to inline.

Something like this 

ul{
     display: inline;
}
Zachary Frazier
Zachary Frazier
10,249 Points
Zachary Frazier
Zachary Frazier
10,249 Points

You can also change the style of the bullet displayed instead of eliminating it with the list-style-type and list-style-style-image properties. For example if you wanted coffee mugs instead of bullet points, you could link to a graphic of a coffee mug and it would display as a bullet for each li.