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 trialAshvin Mbuguni
6,360 PointsSince starting the Fonts on CSS I have lost the green header on my page and the fonts are now blue. Help?
I haven't changed anything else on the main.css sheet that I haven't otherwise been asked to change. Could someone please help?
Ashvin Mbuguni
6,360 PointsHTML CODE;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ash Mbuguni | Front End Web Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Changa+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Ash Mbuguni</h1> <h2>Front End Web Developer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="Image/numbers-01.jpg"> <Image src="Image/numbers-01.jpg" alt=""> <P>Experimentation with colour and texture</P> </a> </li> <li> <a href="Image/numbers-02.jpg"> <Image src="Image/numbers-02.jpg" alt=""> <P>Experimentation with kids logo</P> </a> </li> <li> <a href="Image/numbers-06.jpg"> <Image src="Image/numbers-06.jpg" alt=""> <P>Experimentation with belly butter logo</P> </a> </li> <li> <a href="Image/numbers-09.jpg"> <Image src="Image/numbers-09.jpg" alt=""> <P>Experimentation with colour and texture</P> </a> </li> <li> <a href="Image/numbers-12.jpg"> <Image src="Image/numbers-12.jpg" alt=""> <P>Experimentation with colour and texture</P> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/gunitunes"><img src="Image/twitter-wrap.png" alt="Twitter Logo"></a> <p>© 2015 Ashvin Mbuguni</p> </footer> </div> </body> </html>
Ashvin Mbuguni
6,360 PointsMAIN.CSS CODE:
/**************** 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%; }
/**************** HEADING ****************/
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: normail; }
/**************** NAVIGATION ****************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
/**************** FOOTER ****************/
footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc }
/**************** PAGE: PORTFOLIO ****************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5: color: #bdc3c7; }
/**************** COLOURS ****************/
/* site body */ body { background-color: #fff; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* 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; }
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points...Did the problem happen as soon as you added the Google font?
If so, have you double-checked that the Google font code was placed in the correct place: UNDER normalize.css and ABOVE main.css?
Ashvin Mbuguni
6,360 PointsThanks for your response Ms Thomas, I did double check where the google fonts were placed and they are below normalize.css and above main.css.
7 Answers
Chyno Deluxe
16,936 PointsUPDATED
Ok Ashvin Mbuguni after going over your HTML i've noticed quite a few mistakes. So lets break it down with what's missing.
You are missing a few important pieces of HTML elements. html, head and body tags are all missing from your code. Proper structure should look like below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ash Mbuguni | Front End Web Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Changa+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- CONTENT GOES HERE -->
</body>
</html>
Next we have what i mentioned in my original answer. Although you might be reaching for images from a folded named "Image" you still need to use the 'img' tag in order to tell the browser what it is you are putting there. After that your paragraph tags should be lower case 'p'. View below.
<li>
<a href="Image/numbers-01.jpg">
<img src="Image/numbers-01.jpg" alt="">
<p>Experimentation with colour and texture</p>
</a>
</li>
- Rule of thumb: all HTML elements are called in lower case letters.
So your HTML should now look something like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ash Mbuguni | Front End Web Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Changa+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ash Mbuguni</h1>
<h2>Front End Web Developer</h2>
</a>
<nav>
<ul>
<li>
<a href="index.html" class="selected">Portfolio</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="Image/numbers-01.jpg">
<img src="Image/numbers-01.jpg" alt="">
<p>Experimentation with colour and texture</p>
</a>
</li>
<li>
<a href="Image/numbers-02.jpg">
<img src="Image/numbers-02.jpg" alt="">
<p>Experimentation with kids logo</p>
</a>
</li>
<li>
<a href="Image/numbers-06.jpg">
<img src="Image/numbers-06.jpg" alt="">
<p>Experimentation with belly butter logo</p>
</a>
</li>
<li>
<a href="Image/numbers-09.jpg">
<img src="Image/numbers-09.jpg" alt="">
<p>Experimentation with colour and texture</p>
</a>
</li>
<li>
<a href="Image/numbers-12.jpg">
<img src="Image/numbers-12.jpg" alt="">
<p>Experimentation with colour and texture</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/gunitunes">
<img src="Image/twitter-wrap.png" alt="Twitter Logo">
</a>
<p>© 2015 Ashvin Mbuguni</p>
</footer>
</div>
</body>
</html>
Now on to your CSS. I only found two mistakes and they are the following.
/* YOU ARE MISSING THE CLOSING CURLY BRACKET } */
a { text-decoration: none;}
/* YOUR SELECTED PSEUDO CLASS WAS INCORRECT */
/* selected nav link */ nav a:selected, nav a:hover { color: #32673f; }
Chyno Deluxe
16,936 PointsI wanted to correct a mistake I made in the CSS i provided you. I was unaware that you had an anchor tag with the class selected when i suggested the change above. You had it correct on your CSS and the only change needed to be made was the closing curly bracket of the anchor tag.
I hope this helps.
Please be sure to mark my answer as the best answer.
Ashvin Mbuguni
6,360 PointsMr Chyno Deluxe, thanks very much for clarifying the mistakes to me. Everything seems to be in working order now.
Ms Thomas, it was the green color, the font and the alignment of the headers and the nav links. They were margined to the left rather than central, the corrections Mr Deluxe resolved the problem for me.
Carla Thomas
Front End Web Development Techdegree Student 16,039 PointsI'm glad Chyno helped. One day I'll be better at troubleshooting. Have a great day!
Chyno Deluxe
16,936 PointsAwesome! Glad i could help!
Please be sure to mark my answer as the best answer and if you have any other problems in the future i am more than happy to help answer any questions.
Chyno Deluxe
16,936 PointsAt first glance I can see that you have multiple tags that are incorrectly coded. first two i see are your image and paragraph tags. Look over your HTML and make the correct changes. View below. This could be the problem. I've yet to look at the CSS.
<li>
<a href="Image/numbers-01.jpg">
<Image src="Image/numbers-01.jpg" alt="">
<P>Experimentation with colour and texture</P>
</a>
</li>
<!-- CHANGE TO THIS -->
<li>
<a href="Image/numbers-01.jpg">
<img src="Image/numbers-01.jpg" alt="">
<p>Experimentation with colour and texture</p>
</a>
</li>
Chyno Deluxe
16,936 PointsThere are a few things wrong with your code. I will post the changes shortly.
Ashvin Mbuguni
6,360 PointsThanks, though the img file in my project where i get the 'numbers-01.jpg' etc is actually named Image which is why you might find it slightly confusing. Thanks so much for your help!
Carla Thomas
Front End Web Development Techdegree Student 16,039 PointsHello again. Sorry I have not been able to help.
In reference to Chyno's response:
The image tag should not have a capital letter. The Image folder is ok. Just change the tag to lower case.
The same for the paragraph tags.
Ashvin Mbuguni
6,360 PointsThanks, I have changed the Image folder name to img and have edited them all in my HTML document. I also did the same with the paragraph tags, however I am still having the same problems. Thanks for your time anyway.
Carla Thomas
Front End Web Development Techdegree Student 16,039 PointsFor clarification:
Did the entire header disappear or just the green color?
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsWell it would seem I got here too late. Your problem seems to already have been solved.bummer. hehe
Carla Thomas
Front End Web Development Techdegree Student 16,039 PointsCarla Thomas
Front End Web Development Techdegree Student 16,039 PointsHello Ashvin,
Please post your code and I can determine what the problem is. Thanks.