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
Christopher Borchardt
2,908 PointsNav formatting not displaying
For some reason the nav section of my main.css is not displaying correctly. none of the changes in that section are showing up on my page. Bellow is a copy of my HTML code from index.html , if this does like what it did the last time i posted it, chances are the doctype, html, and head tags will not show up on what displays here, but i did paste them :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chris Borchardt | Designer</title>
<link rel="stylesheet" href="css/norlmalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href = "index.html" id="logo">
<h1>Chris Borchardt</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul>
<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 in photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's stle of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using photoshop brushse.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://www.facebook.com/Aramil10"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://twitter.com/Aramil2010"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>Ā© 2016 Chris Borchardt.</p>
</footer>
</div>
</body>
</html>
5 Answers
Meg Matty
Front End Web Development Techdegree Graduate 22,928 PointsCouple things- Your nav background-color needs a hash - #009a68; If you want no dots on your li items, you will need li to have list-style: none;
LaToya Legemah
12,600 PointsYour reference to the normalize.css is misspelled. {<link rel="stylesheet" href="css/norlmalize.css">}
Christopher Borchardt
2,908 Pointsi fixed that, but the nav formatting is still not showing up. the colors are still the same that are set in the header format
LaToya Legemah
12,600 PointsCan you make a snapshot of your workstation? In workstations click on the icon that looks like a box with a dot in the middle. It will give you a link. Please forward that link.
Thanks
Meg Matty
Front End Web Development Techdegree Graduate 22,928 PointsMaybe try putting just the anchor tags inside the nav tag without the unordered list? Does that improve it or make it worse? W3Schools - Nav
Christopher Borchardt
2,908 PointsI can try that, but the way i have it now is the way it was set up in the video's up to this point.
Christopher Borchardt
2,908 Pointsthank you meg matty, that seemed to fix it. and i must have missed a spot earlier where the LI items were made links, so thats why the color of the text didn't work right either. but now all formatting is correct.
Meg Matty
Front End Web Development Techdegree Graduate 22,928 PointsNo problem, glad it is working now!
Christopher Borchardt
2,908 Pointshttps://w.trhou.se/qo29uhboo9 it is all working now, but thank you for telling me how to make that link
LaToya Legemah
12,600 PointsNo problem. :)
Christopher Borchardt
2,908 PointsChristopher Borchardt
2,908 Pointsif its helpful here is the body of my main.css code
a { text-decoration: none; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
logo {
text-align: center; margin: 0; }
a{ color: #004242; }
header { background: #004242; border-color: #009a68; }
h1, h2 { color: #fff; }
nav { background-color: 009a68; }