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 trialMustafa Kasim
1,938 PointsBullet Points still appearing.
This is my code: dunno why the bulet points still show up.
.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
14 Answers
Roberto Alicata
Courses Plus Student 39,959 Pointscheck this code
http://codepen.io/anon/pen/bekAd
I copied your HTML and CSS and added the CSS rule for the unordered list to remove the bullets.
Isn't it the result you want?
Roberto Alicata
Courses Plus Student 39,959 PointsTry to use:
list-style-type:none;
Mustafa Kasim
1,938 PointsHi, I have used that too, but still no luck..
Roberto Alicata
Courses Plus Student 39,959 PointsThis works:
ul.contact-info {
font-size: 0.9em;
margin: 0;
padding: 0;
list-style-type: none;
}
Mustafa Kasim
1,938 PointsThanks but still no luck..
Roberto Alicata
Courses Plus Student 39,959 PointsDid you refresh the preview page?
Mustafa Kasim
1,938 PointsYes, and I have tried different browsers too..
Roberto Alicata
Courses Plus Student 39,959 PointsAre you testing the challenge code or your own code?
Mustafa Kasim
1,938 PointsNo it's my own, I'm inputting it into the workspace.
Roberto Alicata
Courses Plus Student 39,959 PointsOk, can you copy here your HTML code ?
Mustafa Kasim
1,938 Points/************************************************ GENERAL ************************************************/
body {
font-family: 'Verdana', cursive;
}
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img { max-width: 100%; }
h3 { margin: 0 0 1em 0; }
/************************************************ HEADING ************************************************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center;
margin: 0;
}
h1, { font-family: 'Cabin Sketch', cursive; 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; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/************************************************ FOOTER ************************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon { width: 20px; height: 20px; margin 0 5px; }
/************************************************ 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: 0.75em;
color: #bdc3c7;
}
/************************************************ PAGE: ABOUT ************************************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/************************************************ PAGE: CONTACT ************************************************/
ul.contact-info { font-size: 0.9em; margin: 0; padding: 0; list-style-type: none;
}
/************************************************ COLORS ************************************************/
/* site body */ body { background-color: #E44D2E; color: #FFEBCD; }
/* green header */ header { background: #FFF8DC; border-color: #599a68; }
/* nav background on mobile devices */ nav { background: #DEB000; color: #fff; }
/* logo text */ h1, h2 { color: #4169E1; }
/* links */ a { color: #4169E1; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #000; }
Roberto Alicata
Courses Plus Student 39,959 Pointsthe HTML code please
Mustafa Kasim
1,938 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mustafa Kasim | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Mustafa Kasim</h1> <h2>Photographer</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/IMG_2316.jpg"> <img src="img/IMG_2316.jpg" alt=""> <p>Experimentation with Filters</p> </a> </li> <li> <a href="img/IMG_2317.jpg"> <img src="img/IMG_2317.jpg" alt=""> <p>Exploring Japan</p> </a> </li> <li> <a href="img/IMG_2318.jpg"> <img src="img/IMG_2318.jpg" alt=""> <p>Serenity</p> </a> </li> <li> <a href="img/IMG_2324.jpg"> <img src="img/IMG_2324.jpg" alt=""> <p>Unrivalled Architecture</p> </a> </li> <li> <a href="img/IMG_2327.jpg"> <img src="img/IMG_2327.jpg" alt=""> <p>Passing through</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/CebollaGrande"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/mustafa.kasim.71"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Mustafa Kasim.</p> </footer> </div> </body> </html>
Roberto Alicata
Courses Plus Student 39,959 Pointsuse the MARKDOWN code wrapper
Mustafa Kasim
1,938 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mustafa Kasim | Photographer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Mustafa Kasim</h1>
<h2>Photographer</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/IMG_2316.jpg">
<img src="img/IMG_2316.jpg" alt="">
<p>Experimentation with Filters</p>
</a>
</li>
<li>
<a href="img/IMG_2317.jpg">
<img src="img/IMG_2317.jpg" alt="">
<p>Exploring Japan</p>
</a>
</li>
<li>
<a href="img/IMG_2318.jpg">
<img src="img/IMG_2318.jpg" alt="">
<p>Serenity</p>
</a>
</li>
<li>
<a href="img/IMG_2324.jpg">
<img src="img/IMG_2324.jpg" alt="">
<p>Unrivalled Architecture</p>
</a>
</li>
<li>
<a href="img/IMG_2327.jpg">
<img src="img/IMG_2327.jpg" alt="">
<p>Passing through</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/CebollaGrande"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/mustafa.kasim.71"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Mustafa Kasim.</p>
</footer>
</div>
</body>
</html>
Mustafa Kasim
1,938 PointsIm sorry but Im unsure of Markdown, its the first time I have heard of it..
Mustafa Kasim
1,938 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mustafa Kasim | Photographer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Mustafa Kasim</h1>
<h2>Photographer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/IMG_2316.jpg">
<img src="img/IMG_2316.jpg" alt="">
<p>Experimentation with Filters</p>
</a>
</li>
<li>
<a href="img/IMG_2317.jpg">
<img src="img/IMG_2317.jpg" alt="">
<p>Exploring Japan</p>
</a>
</li>
<li>
<a href="img/IMG_2318.jpg">
<img src="img/IMG_2318.jpg" alt="">
<p>Serenity</p>
</a>
</li>
<li>
<a href="img/IMG_2324.jpg">
<img src="img/IMG_2324.jpg" alt="">
<p>Unrivalled Architecture</p>
</a>
</li>
<li>
<a href="img/IMG_2327.jpg">
<img src="img/IMG_2327.jpg" alt="">
<p>Passing through</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/CebollaGrande"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/mustafa.kasim.71"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Mustafa Kasim.</p>
</footer>
</div>
</body>
</html>
Roberto Alicata
Courses Plus Student 39,959 PointsOk the error is in that in the HTML you use an unordered list with id=gallery, so in the CSS change the selector to:
ul#gallery {
font-size: 0.9em;
margin: 0;
padding: 0;
list-style-type: none;
}
Mustafa Kasim
1,938 PointsThank you for the reply.. but still nothing seems to change.
hmnnn this is very strange...
Mustafa Kasim
1,938 PointsMustafa Kasim
1,938 PointsThank you for the help, I really do appreciate it! I'll just have to change the images now.
Thank you again! :)