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 trialAndrew Shipley
7,781 PointsAdd Iconography part is not updating.
Hi I am up to the "Add Iconography" part of the Web Design track in the title but it is not showing the changes on the site.
Can anyone see my code and tell me what's wrong?
Thanks.
20 Answers
Justin Budd
12,210 Pointscan you post your code? I'd be more than happy to take a look. You may also reference this code from my style sheet for that project.
``/********************************** Page Contact *********************************/
.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.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'); } ``
Andrew Shipley
7,781 PointsHi, thanks.
I can't seem to get the bullet point to disappear for the list items, also the email icon won't appear:
.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.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'); }
Justin Budd
12,210 Pointscan you send your link to your test page or post the html for the contact page? I don't see anything in that code snippet that stands out that would prevent it from now showing Thanks
Andrew Shipley
7,781 PointsHere it is, thank a lot!
http://web-2naxm45xvk.treehouse-app.com/contact.html
<!DOCTYPE html> <html> <head> <title>Andrew Shipley | Designer</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/normalise.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">
</head> <body> <div id="wrapper"> <header> <a href="index.html" id="logo"> <h1>Andrew Shipley</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" >Portflio</a></li> <li><a href="about.html" >About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <section> <h3>General Information</h3> <p>I am currently looking for new design work, so please don't hesitate to contact me via my Twitter handle.</p> <p>Please only use phone contact for urgent inquiries, otherwise Twitter and Email are the best ways to reach me.</p>
</section>
<section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:+44-151-920-8725">+44-151-920-8725</a></li>
<li class="email"><A href="mailto:andrewdshipley@googlemail.com">andrewdshipley@googlemail.com</A></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=mootonandrew">@mootonandrew</a></li>
</ul>
</section>
<footer>
<a href="http://twitter.com/mootonandrew"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/andrew.shipley.167"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Andrew Shipley.</p>
</footer>
</div>
</body> </html>
Justin Budd
12,210 PointsCheck your 2nd list item in the list
<li class="email"><A href="mailto:andrewdshipley@googlemail.com">andrewdshipley@googlemail.com</A></li>
change both "A's to lower case "a" so it should read
<a href="mailto:andrewdshipley@googlemail.com">andrewdshipley@googlemail.com</a>
next change the class id in your email section from class="email"
to class="mail"
so it matches the same thing in your typed in your css file after i made those two changes it worked in my test environment where i just copied your code into a spot on my page. last thing just make sure the the pictures exist inside your img folder and aren't accidently outside that folder. lastly make sure you have your window sized like he does in the video so everything lines up under each other until you get to the repsonisve webpage section. Let me know if that this works for you.
Justin Budd
12,210 Pointsim not sure how to post the code like you did or i would do that for ya sorry
Andrew Shipley
7,781 PointsAwesome! Thanks Justin, I will give this a shot tomorrow as its late here.
Justin Budd
12,210 PointsAnytime! your welcome, Good luck and happy coding!
Andrew Shipley
7,781 PointsThat worked, except for the bullet points next to the unordered list.
Does anyone know the correct code to make to bullet points go away please?
This is my corresponding HTML and CSS.
css.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
html<ul class="contact-info">
<li class="phone"><a href="tel:+44-151-920-8725">+44-151-920-8725</a></li>
<li class="mail"><a href="mailto:andrewdshipley@googlemail.com">andrewdshipley@googlemail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=mootonandrew">@mootonandrew</a></li>
</ul>
`
Thanks.
Bogdan Ciocsan
4,861 PointsThe following CSS should remove the bullet points:
.contact-info li { list-style-type:none; }
Andrew Shipley
7,781 PointsThanks for your help Bogdan, but it didn't work.
Bogdan Ciocsan
4,861 PointsCan you link to your project so we can see why it's not working?
Justin Budd
12,210 Pointsthe list-style: none; should do it but try changing it to list-style-type: none; i've seen some other forms state the other way maybe even target the .contact-info ul { list-style: none; ) specifically as well i see you did try targeting the li. i know google chrome does not recognize my .selected class but other browsers do maybe it is a browser issue. have you tried on a different browser?
Andrew Shipley
7,781 PointsOnly tried it on chrome so far.
Andrew Shipley
7,781 PointsHere's the link: http://web-2naxm45xvk.treehouse-app.com/contact.html
Thanks so much guys.
Bogdan Ciocsan
4,861 PointsHi Andrew, I think your code is not working because of a bad referenced link in the head section of your page (a css file is getting a 404 error). Replace the normalize.css link with this one: http://web-2naxm45xvk.treehouse-app.com/css/normalize.css and it might fix your problem. (in your current setup you have misspelled the word normalize).
I would also suggest you add the following code afterwards in your main.css file:
ul.contact-info li { list-style-type:none; }
Andrew Shipley
7,781 PointsHI Bogdan,
Just tried your suggestions, changed the misspelling but still didn't work.
I am still linking to the relative normalize.css link in my workspaces because I know I definitely uploaded it there.
Thanks.
Bogdan Ciocsan
4,861 PointsHi Andrew, I can't understand why it's not working.
I created a test workspace and copy pasted your code from your contact page, along with the two css files. The link is here: http://web-w42tt5puho.treehouse-app.com/contact.html
I just added the following line in main.css
ul.contact-info li {
list-style:none;
}
You can see that it's working here. The images are not loaded because I did not download them into my workspace.
PS: When you check your page, do you click on CTRL + F5 (clear the cache)?
Andrew Shipley
7,781 PointsHi Bogdan,
I tried doing F5 for the first time but still didn't work. This is my code now:
ul.contact-info li{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
Does anyone know if someone from Treehouse can get in my workspace and possible show me what's going wrong here?
Bogdan Ciocsan
4,861 PointsMight be that your workspace is not updating your css files. You can try contacting support at this following link: http://teamtreehouse.com/support and give them a link with your thread, it would be easier than having to explain your problem. Good luck!
Nick Pettit
Treehouse TeacherHi everyone,
Two things:
- You shouldn't share links from Workspaces. They will only work for about 15 minutes after you close your Workspace (all the ones I clicked on here don't work).
- The list-style property will work better if its attached to the unordered list element. The following code should get rid of bullet points:
ul.contact-info { list-style: none; }
Andrew Shipley
7,781 PointsHi Nick,
Thanks for your help. I tried your suggestion but it still did not work.
Andrew
Nick Pettit
Treehouse TeacherHi Andrew,
Sorry that didn't work out! Do you have anywhere to host your code (like Dropbox)? You can download all your code from a Workspace as a zip file, upload it someplace, and then share the link here. That will make it a lot easier to debug. :)
Andrew Shipley
7,781 PointsBogdan Ciocsan
4,861 PointsHi Andrew.
I fixed your problem: https://www.dropbox.com/s/k5c2smbtf90is0n/workspace.zip
It was because of the following thing:
/***************************** PAGE CONTACT ********************************/
that was missing a "/" at the start.
Nick Pettit I hope you don't mind I intervenied :-) It was just bugging me to know why it was not working.
Justin Budd
12,210 Pointsit's always the small things we overlook. I was writing something in c# and forgot a " ; " at the end of one of my statements and it took me forever to find.
Andrew Shipley
7,781 PointsHi Bogdan,
Yup, that fixed it. Thanks!
No need for the extra "ul" before the ".contact-info" either.
Bogdan Ciocsan
4,861 PointsGreat to hear that! You're more than welcome! And yes ".contact-info" should have worked from the start, because it was selecting the correct 'ul'. I guess it's just as Justin said, we tend to overlook small things that can ruin our code :-)