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
Rutwik Patel
Courses Plus Student 963 PointsWhy 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
4 Answers
Ricky Sparks
22,249 PointsDid 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
5,258 PointsThis 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
Courses Plus Student 963 PointsYeah 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>© 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
5,258 PointsI'm only seeing bits of your HTML need to see more and post the CSS in the same format.
Khaleel Hamid
5,258 PointsI'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
Courses Plus Student 15,815 PointsA couple of issues with your css:
- In your
Footersection, you never actually declare a selector. You should declarefooterand open it with a left curly brace ({). - In your
#gallery li,#gallery li a p,body, and again...bodyrules, you've forgotten the semi-colon at the end of yourcolordeclarations. - There's an extra right curly brace (
}) before yourCOLORblock. - You have an extra
bodyrule 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 aptag inside of anatag. 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
Courses Plus Student 15,815 PointsI 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
Courses Plus Student 963 Pointsthat took care of everything! Thank you
Shawn Flanigan
Courses Plus Student 15,815 PointsGlad I could help!
Khaleel Hamid
5,258 PointsI 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
Courses Plus Student 963 Pointsbut i spelled it gallary* when i assigned the class.. so it shouldn't matter but i fixed.. it still won't fade away
Shawn Flanigan
Courses Plus Student 15,815 PointsShawn Flanigan
Courses Plus Student 15,815 PointsRutwik,
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.