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
Yashar Soroosh
5,617 PointsContact Page
Hello All. I don't know why but my contact page does not display as coded. For example I can not remove the bullets even when I set list-style to none and my phone and mail icons do not come up when I refresh the page. This is the code I'm using on css:
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a { display: block; min-height: 20px; background-size: 20px 20px; padding: 0 0 0 10px; }
.contac-info li.phone a { background-image: url('../img/phone.png');
}
.contac-info li.mail a { background-image: url('../img/mail.png');
}
30 Answers
Sean T. Unwin
28,690 PointsYour icons are not showing up because you have a typo for .contact- info in your last 2 declarations -- missing the second "t".
As to bullets, is .contact-info attached to the <ul> correctly?
Yashar Soroosh
5,617 PointsThanks Sean I made the correction and the icons still do not show and .contact-info is attached to the <ul>.
Here's my revised code
for HTML:
<ul class = "contact-info"></ul>
for CSS:
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a { display: block;/Anchor elements will take up space so that the images will have space to be displayed/ min-height: 20px;/Minimum height of the icons/ background-repeat: no-repeat;/Backgound images will display only once/ background-size: 20px 20px;/Background image sizes/ padding: 0 0 0 10px;/*Only padding to the left side where the images are going */ }
.contact-info li.phone a { background-image: url('../img/phone.png');
}
.contact-info li.mail a { background-image: url('../img/mail.png');
}
Sean T. Unwin
28,690 PointsYour comments are not formatted properly. Although, the last one is.
Yashar Soroosh
5,617 PointsI took out all the comments still doesn't change anything
Sean T. Unwin
28,690 PointsCan you post your HTML again? I can't see it.
qybjpwnice
2,994 PointsAre you sure your phone.png and mail.png images are uploaded to the right folder?
Also, I can't see the HTML either. I would look at the contact.html to make sure everything is fine there.
Yashar Soroosh
5,617 Points<h3> Contact Details</h3> <ul class = "contact-info"></ul> <li class = "phone"><a href ="tel: 416-816-2862">416-826-2862</a></li> <li class = "mail"><a href ="mailto: yasharsoroosh@gmail.com">yasharsoroosh@gmail.com</a></li> <section> </section>
Yashar Soroosh
5,617 PointsYep they are in the img folder
Yashar Soroosh
5,617 PointsYep they are in the ing folder
Yashar Soroosh
5,617 PointsYep they are in the ing folder
Yashar Soroosh
5,617 PointsYep they are in the ing folder
qybjpwnice
2,994 PointsNot sure if you mistyped but it should be "img" not "ing"
Yashar Soroosh
5,617 PointsI meant img
qybjpwnice
2,994 PointsPost the code for your contact.html page.
Yashar Soroosh
5,617 Points<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Yashar Soroosh</title> <link rel ="stylesheet" href = "css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,600italic,400,700,800' rel='stylesheet' type='text/css'> <link rel ="stylesheet" href = "css/main.css"> </head> <body> <header> <a href = "index.html" id = "logo"> <h1>Yashar Soroosh</h1> <h2>Developer</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 currently looking for work as a Rails developer. I am authorized to work in the US and Canada. Willing to relocate or be a road warrior.</p> <p>The best way to reach me is by phone or email.</p> </section> <h3> Contact Details</h3> <ul class = "contact-info"></ul> <li class = "phone"><a href ="tel: 416-816-2862">416-826-2862</a></li> <li class = "mail"><a href ="mailto: yasharsoroosh@gmail.com">yasharsoroosh@gmail.com</a></li> <section> </section> <footer> <a href="http://www.twitter.com"><img src = "img/twitter-wrap.png" alt="Twitter Logo" class = "social-icon"></a> <a href="http://www.facebook.com/Yejooraieeeeeeee"><img src = "img/facebook-wrap.png"alt="Facebook Logo" class = "social-icon"></a> <p>© 2014 Yashar Soroosh</p> </footer> </div> </body> </html>
Sean T. Unwin
28,690 PointsAre any styles being set at all? Is the stylesheet linked correctly in html?
Yashar Soroosh
5,617 PointsJust what I shoed you on the css code
qybjpwnice
2,994 PointsCan't see any of the code for the html.
Make sure to use markdown to show the code here on the forums.
Use '''html before the first line
and then ''' at the end of all the code.
Sean T. Unwin
28,690 PointsTo post code:
The "`" key is on the tilde key (usually the first key in the number row on western keyboards).
type:
\``` (without the slash)press
entertwicepaste code
press enter twice
type:
\``` (without the slash)
Yashar Soroosh
5,617 Points<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Yashar Soroosh</title>
<link rel ="stylesheet" href = "css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,600italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel ="stylesheet" href = "css/main.css">
</head>
<body>
<header>
<a href = "index.html" id = "logo">
<h1>Yashar Soroosh</h1>
<h2>Developer</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 currently looking for work as a Rails developer. I am authorized to work in the US and Canada. Willing to relocate or be a road warrior.</p>
<p>The best way to reach me is by phone or email.</p>
</section>
<h3> Contact Details</h3>
<ul class = "contact-info"></ul>
<li class = "phone"><a href ="tel: 416-816-2862">416-826-2862</a></li>
<li class = "mail"><a href ="mailto: yasharsoroosh@gmail.com">yasharsoroosh@gmail.com</a></li>
<section>
</section>
<footer>
<a href="http://www.twitter.com"><img src = "img/twitter-wrap.png" alt="Twitter Logo" class = "social-icon"></a>
<a href="http://www.facebook.com/Yejooraieeeeeeee"><img src = "img/facebook-wrap.png"alt="Facebook Logo" class = "social-icon"></a>
<p>© 2014 Yashar Soroosh</p>
</footer>
</div>
</body>
</html>
Sean T. Unwin
28,690 Pointstilde key 3 times (no shift)
Yashar Soroosh
5,617 PointsThanks I didn't know that
Yashar Soroosh
5,617 PointsThanks I didn't know that
Yashar Soroosh
5,617 Points<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Yashar Soroosh</title>
<link rel ="stylesheet" href = "css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,600italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel ="stylesheet" href = "css/main.css">
</head>
<body>
<header>
<a href = "index.html" id = "logo">
<h1>Yashar Soroosh</h1>
<h2>Developer</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 currently looking for work as a Rails developer. I am authorized to work in the US and Canada. Willing to relocate or be a road warrior.</p>
<p>The best way to reach me is by phone or email.</p>
</section>
<h3> Contact Details</h3>
<ul class = "contact-info"></ul>
<li class = "phone"><a href ="tel: 416-816-2862">416-826-2862</a></li>
<li class = "mail"><a href ="mailto: yasharsoroosh@gmail.com">yasharsoroosh@gmail.com</a></li>
<section>
</section>
<footer>
<a href="http://www.twitter.com"><img src = "img/twitter-wrap.png" alt="Twitter Logo" class = "social-icon"></a>
<a href="http://www.facebook.com/Yejooraieeeeeeee"><img src = "img/facebook-wrap.png"alt="Facebook Logo" class = "social-icon"></a>
<p>© 2014 Yashar Soroosh</p>
</footer>
</div>
</body>
</html>
Yashar Soroosh
5,617 PointsHere's the CSS
.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 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
Sean T. Unwin
28,690 PointsYou need double quotes around the linkage to Google Fonts. Edit: Apparently you don't; single quotes are valid.
The <li>'s are outside of the <ul>.
There is no space before alt="Facebook Logo" in the <img> tag.
Yashar Soroosh
5,617 Points<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Yashar Soroosh</title>
<link rel ="stylesheet" href = "css/normalize.css">
<link href="http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,600italic,400,700,800" rel="stylesheet" type="text/css">
<link rel ="stylesheet" href = "css/main.css">
</head>
<body>
<header>
<a href = "index.html" id = "logo">
<h1>Yashar Soroosh</h1>
<h2>Developer</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 currently looking for work as a Rails developer. I am authorized to work in the US and Canada. Willing to relocate or be a road warrior.</p>
<p>The best way to reach me is by phone or email.</p>
</section>
<h3> Contact Details</h3>
<ul class = "contact-info"></ul>
<li class = "phone"><a href ="tel: 416-816-2862">416-826-2862</a></li>
<li class = "mail"><a href ="mailto: yasharsoroosh@gmail.com">yasharsoroosh@gmail.com</a></li>
<section>
</section>
<footer>
<a href="http://www.twitter.com"><img src = "img/twitter-wrap.png" alt="Twitter Logo" class = "social-icon"></a>
<a href="http://www.facebook.com/Yejooraieeeeeeee"><img src = "img/facebook-wrap.png" alt="Facebook Logo" class = "social-icon"></a>
<p>© 2014 Yashar Soroosh</p>
</footer>
</div>
</body>
</html>
Yashar Soroosh
5,617 Pointsnothing happened
qybjpwnice
2,994 PointsYou still haven't fixed the list items. As Sean pointed out, they are outside of the unordered list.
You need to make sure the list items for phone and mail are INSIDE the ul.
To fix this, simply put the closing tag for the second ul after the mail's list item closing tag.
I'd write it out but I'm on my cell phone right now.
qybjpwnice
2,994 PointsOne last issue that may be causing the page to not display as intended is you don't have the code for the contact details inside the second "section" tag
Notice you have an opening and closing section tags after the contact details but they're empty. The opening section tag should be on its own line right before the h3 tag.
Those two fixes Sean and I suggested should get everything looking as it should.
Sean T. Unwin
28,690 PointsFor ease of reading and other developers working on your code, I would suggest to not get in the habit of putting spaces on each side of the equals sign(=) between a tag's attribute and value. i.e. <li class = "selected"> would be <li class="selected">.
Yashar Soroosh
5,617 PointsThanks Guys it worked. Sorry for the late reply. My Internet stopped working. The problem was the list items not being inside the unordered list. I really appreciate your time and help. Hopefully one day I could be as talented as you guys.