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
Kevin Wharton
3,211 PointsI can no longer preview my contact page after editing main.css?
I was working in my main.css file and now I can't preview my "Contact" page, the other pages work fine though.
When I click Contact it just takes me to a blank page. I've had a look but I can't see where/how I've gone wrong.
Hope someone can help, thanks!
.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;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-mail li.mail a {
background-image: url('../img/mail.png');
}
.contact-twitter li.twitter a }
background-image: url('../img/twitter.png');
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kevin Wharton | Unicyclist</title>
<link rel="stylesheet" href="css/normalize.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>
<header>
<a href="index.html" id="logo">
<h1>Kevin Wharton</h1>
<h2>Unicyclist</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfilio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kevin Wharton | Unicyclist</title>
<link rel="stylesheet" href="css/normalize.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>
<header>
<a href="index.html" id="logo">
<h1>Kevin Wharton</h1>
<h2>Unicyclist</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfilio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
Kevin Wharton
3,211 PointsThanks Sreng! I'll just add the section of code I've been working on I guess?
John Steer-Fowler
Courses Plus Student 11,734 PointsHi Kevin,
Please post your html here too. Need to have a look at your links
Kevin Wharton
3,211 PointsHopefully I haven't added too much.
7 Answers
John Steer-Fowler
Courses Plus Student 11,734 PointsThis code is wrong in your css:
.contact-twitter li.twitter a }
background-image: url('../img/twitter.png');
}
It should be something like this:
.contact-twitter li.twitter a {
background-image: url('../img/twitter.png');
}
This might not be the reason, but it's still an error in your css
Kevin Wharton
3,211 PointsAh thanks for pointing that out!
Kevin Korte
28,149 PointsUse your browsers Dev Tools to pull up the live source code, and see if you can find what is going on. That should get you a long ways.
John Steer-Fowler
Courses Plus Student 11,734 PointsJust to check. You have saved the file as contact.html and in the root directory and not in a sub-folder right?
It seems like it maybe be because you are linking to contact.html but contact.html is not saved in that name.
Kevin Wharton
3,211 PointsHi John, the name and location of the contact.html file is correct and it was all working smoothly before I started adding the contact styling in CSS.
I tried deleting what I added and reloaded but still no luck. Also when I click the contact page it takes me to the blank page and instead of my title above the address bar it has "web-v1dmlkninc.treehouse-app.com/contact.html"
Kang-Kyu Lee
52,045 Pointsthat link web-v1dmlkninc.treehouse-app.com/contact.html shows your contact page on my browser.
John Steer-Fowler
Courses Plus Student 11,734 PointsI just did the same thing, and it shows your contact page on mine too...
Kevin Wharton
3,211 PointsHmm, also works for me in Safari but not in the workspace preview? Any ideas on why this would be?
I'll resort to reloading the page outside of Workspace so I can continue with the lessons at least. I appreciate everyones time and help!
John Steer-Fowler
Courses Plus Student 11,734 PointsI just tested the code on my personal machine, not on the Treehouse Workspaces and it worked fine.
I will test it in a Workspace now
John Steer-Fowler
Courses Plus Student 11,734 PointsJust tested it on a Workspace, it works fine for me.
Kevin Wharton
3,211 PointsThanks for testing John, so do you think it would be something deeper in my main.css? As that's what I was working in before it stopped working.
Wayne Priestley
19,579 PointsHi Kevin,
You may want to try something as simple as logging out and then back into Treehouse to see if that fixes the issue.
Kevin Wharton
3,211 PointsHi Wayne,
I haven't logged out but my computer was off for a few hours, it's been working fine once I started it back up :)
Thanks for everyones help!
Cheers, Kevin
Sreng Hong
15,083 PointsSreng Hong
15,083 PointsHi Kevin, you have to post your codes in order for people to help. Use Markdown Cheatsheet.