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 trialShruthi Manas
893 PointsMain.css not working
I'am creating a website and my main.css is not working none of the colors nor the nav elements are working. Please advice Here's my main.css code
/******************* GENERAL *******************/
body{ font-family:'Open Sans',sans-serif;
}
a{ text-decoration: none; }
wrapper {
max-width:940px;
margin:0 auto;
padding:0 7%; }
logo {
text-align :center; margin :0;
h1{ font-family: 'Changa One',san-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;
} /******************************* HEADER ****************************/
/******************************* NAVIGATION ****************************/
nav{ text-align:center; padding:10px 0; margin:20px 0; } /******************************* FOOTER ****************************/
footer{ font-size:0.75em; text-align:center; padding-top:50px; color:#ccc;
}
/************************ COLORS ****************************/ / site body */
body{ background-color:#fff; color:#999; }
/* green header*/
header{ background:#6ab47b; border-color:#599a68; }
/* nav backgorund*/ nav{ background:#599a56; } /*logo text */
h1,h2{ color:#fff;} a{ color:#6ab47b; }
/* nav link*/
nav a,nav a:visited { color:#fff; }
/* selected nav link*/
nav a.selected,nav a:hover{ color:#32673f;
}
Shruthi Manas
893 PointsHi Nicholas,
Here's my html code,
<DOCTYPE! html> <html> <head> <meta chartype="utf-8"> <title>Sri Laven Engineering</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" 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"> <style> footer { color: green; }
footer{
background-color: #CCC;
}
header{
background-color: #6699ff;
}
</style>
</head> <body> <header> <a href="index.html" id="logo"> <h1>Sri Laven Engineering</h1> <h2>S Balaji</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section> <ul> <li> <a href="img/Sri_laven/DSC_0061.jpg"> <img src="Sri_laven/DSC_0061.jpg" alt=""> <p>Milling machine</p> </a> </li>
<li>
<a href="img/Sri_laven/DSC_0061_1.jpg">
<img src="Sri_laven/DSC_0061_1.jpg" alt="">
<p>Drilling machine</p>
</a>
</li>
<li>
<a href="img/Sri_laven/DSC_6016 copy.jpg.jpg">
<img src="Sri_laven/DSC_6016 copy.jpg" alt="">
<p>Drilling machine</p>
</a>
</li>
<li>
<a href="img/Sri_laven/DSC_6076 copy.jpg.jpg">
<img src="Sri_laven/DSC_6076 copy.jpg" alt="">
<p>Drilling machine</p>
</a>
</li>
</ul>
</section>
<footer> <a href="http://twitter.com/shruthimanas"><img src="photos/twitter-wrap.png" alt="twitter-logo"></a> <a href="http://facebook.com/shruthimanas@gmail.com"></a><img src="photos/facebook-wrap.png" alt="facebook-logo"> <a href="http://linkedin.com/shruthimanas"></a><img src="photos/linkedin-wrap.png" alt="linkdln-image"> <p>© 2014 Shruthi Manas. </footer> </div> </body> </html>
1 Answer
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsTwo things I would look for:
1.) Some of your selectors are not using the proper prefixes. For example, 'logo{}' should probably have a '.' or '#' in front of it depending on whether or not you are using a class or an ID respectively. Same thing with 'wrapper{}'
edit: looking at your markup, I see that 'wrapper' is an ID. So your CSS should be '#wrapper{}'
2.) There may be a problem in your HTML that references your CSS file. The part that says <link href=""> Make sure it is there, there are no misspellings, that you are referencing the right directory, etc.
Shruthi Manas
893 PointsThank you Nicholas will check and get back if i have more questions. thanks for your time :)
Shruthi Manas
893 PointsMy main.css still doesn't seem to be working I've done all the checks everything looks fine..
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsNicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsCan you post your html code as well?