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 trialCandido Romano
Front End Web Development Techdegree Student 1,873 PointsThe mail icon doesn't show up. Phone and Twitter icon are in the wrong place. Help
This is my first question in here, so please be kind ;)
I lost about 40 minutes on this code, but I can't see the mail icon. I see the phone and twitter icon but they are in the wrong place. What's wrong with my code?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Candido Romano | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,800,400|Changa+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Candido Romano</h1>
<h2>Journalis and Storyteller</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>
<h3>General Information</h3>
<p>I am not currently looking for new design work, but I am available for speaking gigs and similar engagement. If you have any questions please don't hesitate to contact me!</p>
<p>Please use phone contact for urgent inquiries</p>
</section>
<section>
<h3>Contact details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-6425">555-6425</a></li>
<li class:"mail"><a href="mailto:candid.romano@gmail.com">candid.romano@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=CandidoRomano">@CandidoRomano</a></li>
</ul>
</section>
<footer>
<a href="http://twitter.com/CandidoRomano"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/Candido83"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© Candido Romano.</p>
</footer>
</div>
</body>
</html>
.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');
}
3 Answers
Erik McClintock
45,783 PointsCandido,
The reason your mail icon isn't showing up is likely related to the error in syntax in your HTML.
You have this:
<li class:"mail">
But you need:
<li class="mail">
The difference is that you have a colon ( : ) where you need an equals sign ( = ) between your class attribute and the mail value.
As far as your other icons being in the wrong place; how do you mean?
Erik
Candido Romano
Front End Web Development Techdegree Student 1,873 PointsThank you guys, now I see the mail icon, but all the icon are still in the wrong place.
Erik: I mean, this three icon should be to the left of the page, with some space between the icons and phone number number, mail and twitter nick. But I don't see this space, the icon are still ON the text, even with the same (maybe :) ) CSS of the video. It's like the padding doesn't work. There's sure a problem with my CSS...but i don't know what is it
Wayne Priestley
19,579 PointsHi Candido,
You have,
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
You need a space between li and .mail
.contact-info li .mail a {
background-image: url('../img/mail.png');
}
Candido Romano
Front End Web Development Techdegree Student 1,873 PointsHi Wayne,
first, thank you for this answer but the space between li and .mail wasn't my problem.
I wrote earlier "It's like the padding doesn't work", actually the typo is in the padding line. As you can see in my code, I wrote
padding; 0 0 0 30;
but the correct is
padding: 0 0 0 30;
A colon instead of a semicolon....now i got it, I see my error after two hours!
Thank you all guys
Sau Ting K
11,091 PointsSau Ting K
11,091 PointsOn first glance over, your code for mail in the HTML has a typo. You put "class:" instead of "class=".