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
Nerinna Valera
1,091 Pointsimage icons showing twice?? it's not coded twice.
First off, I'm not using workspace because it isn't working for me so I'm using Sublime Text to do the work. I'm at a point where I'm working on the Contact Page. I'm following the instructions perfectly (at least I'm pretty I am) but now I have an error. My image icons for email and twitter are showing up twice. Below is my code for the Contact Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nerinna Valera | Photographer & Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800|Open+Sans+Condensed:300' 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>Nerinna Valera</h1>
<h2>Photographer & Designer</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 id="primary">
<h3>General Information</h3>
<p>Thank you for visiting Nerinna Valera Photography. Please email or fill in the information below.</p>
<p>Twitter and email are the best way to reach me.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:408-409-3060">408-409-3060</li>
<li class="email"><a href="mailto:info@nerinna.com">info@nerinna.com</li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nerinna_valera">@nerinna_valera</li>
</ul>
</section>
<footer>
<a href="https://twitter.com/nerinna_valera"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/nerinna.photography/"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2016 Nerinna Valera</p>
</footer>
</div>
</body>
</html>
Below is my CSS:
/**************************************************** GENERAL *****************************************************/
body { font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a { text-decoration: none; }
img { max-width: 100%; }
h3 { margin: 0 0 1em 0; }
/**************************************************** HEADING *****************************************************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', 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; }
nav ul { list-style: none; margin: 0 10px; padding; 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/**************************************************** FOOTER *****************************************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/**************************************************** 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: 0.75em; color: #bdc3c7; text-align: center; }
/**************************************************** PAGE ABOUT *****************************************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 5px; }
/**************************************************** 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.email a { background-image: url('../img/mail.png'); }
.contact-info li.twitter a { background-image: url('../img/twitter.png'); }
/**************************************************** COLORS *****************************************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */ header { background: #6ab47b; border-color: #5995a8; }
/* nav background on mobile */ nav { background: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; ;
5 Answers
Marc Lambertz
23,515 PointsSeems you should make use of:
background-repeat: no-repeat;
Additionally First: Your Markdown of the CSS file can be optimized. So that you do not have to indent all lines by 4 spaces, just use Sublime Text to indent all lines at once, copy it over to this page and revert the indentation in Sublime Text.
Second: The source code on http://www.nerinnanation.com/contact.html looks different to the code you have posted above. All hyperlinks in the unordered list are duplicated. Don't know how this can happen, but weird things often happen when we forget to close tags properly or make other syntactical mistakes.
Look at the inline comments:
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:408-409-3060">408-409-3060<!-- missing closing tag --></li>
<li class="email"><a href="mailto:info@nerinna.com">info@nerinna.com<!-- missing closing tag --></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nerinna_valera">@nerinna_valera<!-- missing closing tag --></li>
</ul>
</section>
You also have 2 typos in your main.css file. If Sublime Text is not showing them to you, use your browsers inspect mode to highlight the errors.
samiff
31,206 PointsIt almost sounds like maybe the background-repeat option isn't functioning. It's hard to look at the code you pasted, but it looks like you may have some typos such as on line 34 with an extra semicolon. If you open the Chrome Dev Tools, can you inspect the element and see what's going on with it? Is the no-repeat option enabled there?
Also, what issue did you have with Workspaces? It's a really cool tool and makes sharing your code for times like this super easy.
Nerinna Valera
1,091 PointsHi samif, the issue with Workspace was when I viewed it in Preview mode it didn't show my pages. When I did the same thing using Sublime Text I was able to view my pages in Chrome. So I don't know what's going on there. I'm still having that problem.
Nerinna Valera
1,091 PointsHere's a link to what I'm getting on my contact page:
samiff
31,206 PointsMarc pointed out that you're missing some closing 'a' tags which would duplicate some of the CSS rules on the following 'li' items afterwards.
As far as Workspaces go, have you tried launching a workspace level associated with a particular video and previewing that? What happens when you click the preview icon?
Nerinna Valera
1,091 Pointsthank you so much! i feel like an idiot. It was definitely the closing </a> tag that I didn't have in my HTML. That took care of it. thank you thank you!
Regarding workspace, I don't know how to "associate a particular video and preview" yet. All I know is I can view my files on web browsers when I use Sublime Text so I'm assuming it's not the files and it's a workspace issue. I'm new so I'm probably naive.
samiff
31,206 PointsMost video sections have a workspace associated to them with the pre-written code you can use to follow along with. Are you able to load such a workspace? I'm including a quick video of what it looks like for me in Chrome:
If you launch a pre-made workspace, you should be able to 'Preview' it without changing anything.
Nerinna Valera
1,091 PointsHi Samif, thank you. My index.html was in my img folder hence the reason it wasn't showing correctly in preview. Everything is okay now. Thank you again!
Nerinna Valera
1,091 PointsNerinna Valera
1,091 PointsHi Marc, thank you. I have no-repeat background code set in my css but it's still not working. It's so frustrating.