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
Debby Ling
1,398 PointsParts of my main.css are not detected properly. Please help!
In my css file, all elements EXCEPT those under the 'General' heading (i.e body, #wrapper) are suddenly not detectable. I was following the tutorial and did not do anything to the css file; only added a new contact.html file.
Here's my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Debby | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Debby Ling</h1>
<h2>Designer</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="IMG/numbers-01.jpg">
<img src="IMG/numbers-01.jpg" alt="">
<p>Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="IMG/numbers-02.jpg">
<img src="IMG/numbers-02.jpg" alt="">
<p>Playing with blending modes</p>
</a>
</li>
<li>
<a href="IMG/numbers-06.jpg">
<img src="IMG/numbers-06.jpg" alt="">
<p>Trying to create 80s style</p>
</a>
</li>
<li>
<a href="IMG/numbers-09.jpg">
<img src="IMG/numbers-09.jpg" alt="">
<p>Drips creaeatedd</p>
</a>
</li>
<li>
<a href="IMG/numbers-12.jpg">
<img src="IMG/numbers-12.jpg" alt="">
<p>Repeation</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com"><img src="IMG/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com"><img src="IMG/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Debby Ling.</p>
</footer>
</div>
</body>
</html>
Here's my main.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;
/*******************
HEADER
********************/
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;
}
/*******************
NAV
********************/
nav {
text-align:center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style:none;
margin: 0 30px;
padding: 0;
}
nav li {
display: inline-block;
}
/*******************
FOOTER
********************/
footer {
font-size:0.75em;
text-align:center;
clear:both;
padding-top: 50px;
color:#ccc
}
nav a {
font-weight: 800;
padding:15px 10px;
}
.social-icon {
width:20px;
height:20px;
margin 0 5px;
}
/*******************
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 {
margin: 0;
padding: 5%;
font-size:0.75em;
color:#bdc3c7;
}
/*******************
ABOUT
********************/
.profile-photo {
display:block;
max-width:150px
margin: 0 auto 30px;
border-radius: 100%;
}
/*******************
COLORS
********************/
/* site body */
body {
background: #fff;
color: #999
}
/*green header*/
header {
background: #6ab47b;
border-color:#599a68;
}
nav {
background-color:#599a68;
}
/*logo text*/
h1,h2 {
color: #ffffff;
}
/*links*/
a {
color: #6ab47b;
}
nav a, nav a:visited {
color: #fff;
}
/*selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
8 Answers
Michael Bates
13,344 PointsGive this a shot!!
/**********************************
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
}
/**********************************
PAGE: ABOUT
***********************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/**********************************
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.mail 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: #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;
}
Michael Bates
13,344 PointsWould you mind putting a code snippet on here? That might help us find a solution
Michael Bates
13,344 PointsOtherwise, my guess is that there is an error in the code involving linking the files together
Debby Ling
1,398 PointsHi there, I think you're right in that there's an error linking the files together. What's funny is only parts of my css file is not detected. For example, h3 would be displayed fine but h1 and h2 are not.
Would you like to see the main.css code?
Thanks so much!
Michael Bates
13,344 PointsOf course! It will help us figure out what the problem is
Debby Ling
1,398 PointsJust added the index.html and main.css. Pls do take a look when you have the time. Thanks!
Michael Bates
13,344 Pointsdo you have the normalize.css and responsive.css files present and placed within the css folder on Workspaces?
Debby Ling
1,398 PointsI have main.css and normalize.css located within my css folder on workspace. Sorry, I'm an utter newbie and I haven't learnt about responsive.css yet.
Michael Bates
13,344 Pointsno worries! I wasn't sure how far you have gotten, which shouldn't make a difference at this point
Michael Bates
13,344 Pointsand do you have the 'img' folder typed out in all caps like in your syntax?
Debby Ling
1,398 PointsYup! Whenever I referenced to IMG I used all caps. What's funny is if you look at my css file, all the elements under the GENERAL comment heading are all working fine (i.e body, #wrapper), only those of other comment headings like HEADER are acting up.
Thank you SO MUCH for your help!
Michael Bates
13,344 PointsYou are quite welcome! I fixed the the syntax to read 'img' and previewed it and had no issues. Hopefully everything is running fine now!
Debby Ling
1,398 PointsThanks for the suggestion! I tried to change everything to 'img' instead of 'IMG'. Unfortunately, stuff like the green header and the floating element for images are still not showing up nicely :(
Michael Bates
13,344 PointsThere are some syntax issues from what I have noticed:
Missing some white space after ' : ' in a few declarations and after some commas There are some missing ' ; ' as well
Debby Ling
1,398 PointsDebby Ling
1,398 PointsThat worked! Thank you so much!
Even for an amateur, that was a really silly mistake on my part. Can't thank you enough :)))) Have a good day/night ahead!
Michael Bates
13,344 PointsMichael Bates
13,344 PointsYou are very welcome! I have been getting used to using Dev Tools and Debug consoles within browsers. They have helped immensely to find any errors in my code.