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
Sydney Stevens
822 PointsCan't get icons to show up. This is what I have written in my main.css.
Is there something I am missing?
*********************
PAGE: CONTACT
**********************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: .09em;
}
.contact-info a {
display:block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url ('../img/phone.png');
}
.contact-info li.mail a {
background-image: url ('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url ('../img/twitter.png');
}
17 Answers
Joe Hirst
Courses Plus Student 6,489 PointsProblem solved.
Just a misplaced closing ul tag.
<ul class="contact-info"></ul>
<li class=“phone”><a href="#"</a></li>
<li class=“mail”><a href="#">Email</a></li>
<li class=“twitter”><a href="#”>twitter</a></li>
<ul class="contact-info">
<li class=“phone”><a href="#"</a></li>
<li class=“mail”><a href=“#">Email</a></li>
<li class=“twitter”><a href="#”>twitter</a></li>
</ul>
I have sent the files back to you with the <ul> issue fixed. Looks like everything is working nicely now :)
Sydney Stevens
822 PointsIt's not set up like that on the page. There are breaks where there needs to be.
Joe Hirst
Courses Plus Student 6,489 PointsHey Sydney,
have you checked your image paths are 100% correct with an inspector?
Sydney Stevens
822 PointsI have a css folder for my main.css and then my other pages are all outside of that folder within the project folder - "how to make a website"
Sydney Stevens
822 PointsWhere is the inspector? So I can check?
Joe Hirst
Courses Plus Student 6,489 PointsDepends on the browser you are using.
Safari = ALT + COMMAND + I
FireFox = ALT + COMMAND + C
Chrome = ALT+ COMMAND + U
Or you can right click, “View source/inspect”
You’ll want to inspect your background url. Clicking the patch should take you to the file if the path is correct.
If your paths are working correctly, the only other thing I can think of is removing the space after “url” as David suggested...
David Tonge
Courses Plus Student 45,640 PointsTry removing the space after "url" when setting the value for the background-image property.
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
If that doesn't work; I'll take a look at the challenge.
Sydney Stevens
822 PointsStill didn't work. Also I just noticed. When I highlight the three options to contact me -including my phone, email and twitter. It still shows there are bullet points even though I removed them with the list style element under my .contact-info class. My background is white. I don't know how JUST the bullet points are white when the rest of my text is grey?
Sydney Stevens
822 PointsI just fixed the bullet point color so they are the same as the rest of the sites font color by adjusting the color section in my css
body { background color: #fff; color: #3f414d; }
But the bullets are still there and they shouldn't be. There should be icons.
Joe Hirst
Courses Plus Student 6,489 PointsCheck that you've not overwritten your <li> style.
They're in an <li> right?
Sydney Stevens
822 PointsI have an image (my logo I made in PS) in my header section instead of just the normal writing. Would this effect that?
Sydney Stevens
822 PointsThis is my index page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sydney E. Stevens | Editor</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Allura' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1> <img src="img/sydneyestevens.png"> </h1>
</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>
<h3>MY WORK</h3>
<ul id="gallery">
<li>
<a href="img/Blue.jpg">
<img src="img/Blue.jpg" alt="">
<p>Winter 2014 - Bluebird visits</p>
</a>
</li>
<li>
<a href="img/roadtrip.jpg">
<img src="img/roadtrip.jpg" alt="">
<p>Summer 2013 - goodbye summer</p>
</a>
</li>
<li>
<a href="img/lackchamplain2.jpg">
<img src="img/lakechamplain2.jpg" alt="">
<p>Summer 2011 - Lake Champlain</p>
</a>
</li>
<li>
<a href="img/skittles.jpg">
<img src="img/skittles.jpg" alt="">
<p>Winter 2014 - an unhealthy obssession</p>
</a>
</li>
<li>
<a href="img/grandcanynon.jpg">
<img src="img/grandcanynon.jpg" alt="">
<p>Summer 2011 - Grand Canyon</p>
</a>
</li><li>
<a href="img/waitingforspring.jpg">
<img src="img/waitingforspring.jpg" alt="">
<p>Winter 2014 - Waiting for Spring</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://twitter.com/sydder123"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/sydney.elizabeth.908"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Sydney Stevens.</p>
</footer>
</div>
</body>
</html>
Joe Hirst
Courses Plus Student 6,489 PointsHmm... Are you comfortable emailing me your project folder so I can take a look?
Joe Hirst
Courses Plus Student 6,489 PointsI don't see how that woul effect anything, no.
If you have the ability to upload or share your files somewhere, I'd be more than happy to help troubleshoot this for you. :)
Sydney Stevens
822 Pointshaha I haven't learned how to put it on my hosting site yet...Where could I share this?
Joe Hirst
Courses Plus Student 6,489 PointsIf you know how to use github, then that would work.
Alternatively, google drive or Dropbox will enable you to share files and folders with people.
Sydney Stevens
822 PointsI will try google drive. Who can I send it to?
Joe Hirst
Courses Plus Student 6,489 PointsYou can send it to anyone I believe.
If you want to sent it to my gmail: j**********n@gmail.com is my google email.
Sydney Stevens
822 PointsAwesome I will send it to you now!
Joe Hirst
Courses Plus Student 6,489 PointsCant really work with how you’ve sent the files... I’m missing a lot of things it seems.
Can you just zip them and send them to me by any chance?
Sydney Stevens
822 PointsSorry I don't really know what I am doing? All the html I have written is on the Treehouse workspace. I don't know how to zip them from there other than just copying and pasting them somewhere. The images he gave me are all on the workspace as well.
Joe Hirst
Courses Plus Student 6,489 PointsOkay, no problem. How about just attaching the folder that all your files and images are in into an email? you can send it to the same email as before. This should deliver everything you have in main site folder. I should be able to see everything how you see it then. :)
Joe Hirst
Courses Plus Student 6,489 Points“The images he gave me are all on the workspace as well.”
You mean you don’t actually have the image on your computer in the “img” folder you are pointing the CSS to?
If that’s the case, then we just figured out your problem.
David Tonge
Courses Plus Student 45,640 PointsThanks for being so helpful, Joseph.
Joe Hirst
Courses Plus Student 6,489 PointsMy pleasure David.
David Tonge
Courses Plus Student 45,640 PointsDavid Tonge
Courses Plus Student 45,640 PointsCould you describe how your website's folders are set up(directory-wise)? Do you have your CSS files in the same folder as your HTML documents or there's also a directory for your CSS files?