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
robert sedgwick
1,336 PointsMy code looks correct however the background color of my nav will not change.
I'm not using the code editor on the site, I'm building the project on a directory on my computer. I've tested my site in edge and firefox and although my links have changed to the darker green the nav background remains the lighter green.
I got a few videos ahead before I noticed the discrepancy.
CSS
/***********************************
General
***********************************/
#wrapper { /* Center div on page */
max-width: 940px; /* Sets width <= max width */
margin: 0 auto; /* Sets margin. 0 = top/bottom, auto = left/right */
padding: 0 5%; /* Adds padding to sides. */
}
a {
text-decoration: none; /* Removes underline from links */
}
/***********************************
Heading
***********************************/
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em; /* 1em = current font size. */
}
/***********************************
Colors
**********************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
overflow:hidden;
}
/* nav background on mobile */)
nav {
background: #599a68;
overflow:hidden;
}
/* Logo text */
h1, h2 { /* Selects both elements */
color: #fff; /* Hex short hand = #ffffff */
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited { /* Visited sudo-class, keeps links white */
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>R. Sedgwick | 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' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo"> <!-- Open logo -->
<h1 class="temp">Robert A. Sedgwick</h1>
<h2>Designer</h2>
</a> <!-- Close logo -->
<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"> <!-- Open wrapper -->
<section>
<ul>
<li>
<a href="img/bread.jpg">
<img src="img/bread.jpg" alt="">
<p>Artisan bread.</p>
</a>
</li>
<li>
<a href="img/acadia1.jpg">
<img src="img/acadia1.jpg" alt="">
<p>Coastline Acadia, Main.</p>
</a>
</li>
<li>
<a href="img/acadia2.jpg">
<img src="img/acadia2.jpg" alt="">
<p>Black and White, Acadia, Main.</p>
</a>
</li>
<li>
<a href="img/acadia3.jpg">
<img src="img/acadia3.jpg" alt="">
<p>Bridge, Acadia, Main.</p>
</a>
</li>
<li>
<a href="img/starTrail.jpg">
<img src="img/starTrail.jpg" alt="">
<p>Star Trail, Graveyard Fields, North Carolina.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://twitter.com/ra_sedgwick">
<img src="img/twitter-wrap.png" alt="Twitter Logo">
</a>
<a href="https://www.facebook.com/adam.sedgwick.56">
<img src="img/facebook-wrap.png" alt="Facebook Logo">
</a>
<p>© 2016 Robert Sedgwick.</p>
</footer>
</div> <!-- Close wrapper -->
</body>
</html>
Ajay Kondath
1,901 PointsCan you show your code in the index.html file so we could have better idea?
robert sedgwick
1,336 PointsIs the code I posted displaying correctly? When I just had the CSS posted it was formatted correctly but after I added the HTML it looks like my code wrapper isn't having an effect.
Ajay Kondath
1,901 PointsRemove the closing bracket before the nav /* nav background on mobile */) nav { background: #599a68; overflow:hidden; }
it shud be like the following /* nav background on mobile */ nav { background: #599a68; overflow:hidden; }
Let me know if this works
robert sedgwick
1,336 PointsAjay thank you for your assistance I finally found that extra closing bracket and was coming back to close the question but I really appreciate you taking time to look at it. Also, I had added in the overflow:hidden when I was trying to trouble shoot but I've removed it now.
2 Answers
Bryce Santos
11,157 Points/* nav background on mobile */)
Notice how you have a ) right after that comment? That's probably what's messing it up.
Tom Hsu
5,292 PointsThis is the code I grabbed from this page. The CSS is below the HTML because there's something specifically wrong with this page. Your <nav> background color is #599a68. Is this the dark green you are looking for?
Also, I know you are just starting off, but in the future try not to use an overabundance of comments. Only use comments you really need to take notes on because it does get quite hectic with bigger CSS files.
<!DOCTYPE html>
<meta charset="utf-8">
<title>R. Sedgwick | Designer </title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20400,400italic,700,700italic,800" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/main.css">
<header>
<a href="index.html" id="logo">
<h1 class="temp">Robert A. Sedgwick</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>
<li>
</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul>
<li>
<a href="img/bread.jpg">
<img src="img/bread.jpg" alt="">
<p>Artisan bread.</p>
</a>
</li>
<li>
<a href="img/acadia1.jpg">
<img src="img/acadia1.jpg" alt="">
<p>Coastline Acadia, Main.</p>
</a>
</li>
<li>
<a href="img/acadia2.jpg">
<img src="img/acadia2.jpg" alt="">
<p>Black and White, Acadia, Main.</p>
</a>
</li>
<li>
<a href="img/acadia3.jpg">
<img src="img/acadia3.jpg" alt="">
<p>Bridge, Acadia, Main.</p>
</a>
</li>
<li>
<a href="img/starTrail.jpg">
<img src="img/starTrail.jpg" alt="">
<p>Star Trail, Graveyard Fields, North Carolina.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://twitter.com/ra_sedgwick">
<img src="img/twitter-wrap.png" alt="Twitter Logo">
</a>
<a href="https://www.facebook.com/adam.sedgwick.56">
<img src="img/facebook-wrap.png" alt="Facebook Logo">
</a>
<p>© 2016 Robert Sedgwick.</p>
</footer>
</div>
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
/* 1em = current font size. */
}
body {
background-color: #fff;
color: #999;
}
header {
background: #6ab47b;
border-color: #599a68;
overflow: hidden;
}
nav {
background: #599a68;
overflow: hidden;
}
h1,
h2 {
color: #fff;
}
a {
color: #6ab47b;
}
nav a,
nav a:visited {
color: #fff;
}
nav a.selected,
nav a:hover {
color: #32673f;
}
robert sedgwick
1,336 PointsTom thank you for your critique, at this point I'm using comments for note taking/repetition of concepts.
jcorum
71,830 Pointsjcorum
71,830 PointsWithout a copy of your code it's impossible to say what's going wrong.