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 trialkarthikkn
5,397 Pointsto 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>
© 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
13,588 PointsYou 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>
Jason Montoya
6,550 PointsKarthik,
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
12,517 PointsHi 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
Courses Plus Student 94,610 PointsHi 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
Courses Plus Student 94,610 PointsFor 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
5,397 PointsThank you for all the members how have answered to my problem that i am facing.
nvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsI 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
10,249 PointsYou 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.
karthikkn
5,397 Pointskarthikkn
5,397 PointsI 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.