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 trialPatti Nearing
696 PointsHere is the coding for HTML and main.css
Using WINDOWS. Listening to the Video LESSON CSS- Building Navigation and ul lists MY sheet to preview my work does not, in any way look like the sheet,Nick shows in the video !! Here is my coding. Where did I go wrong ????
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Patti Nearing|Web Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' rel='stylesheet' href= "css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name= "viewport" content="width=device-width, int
</head>
<body>
<header>
<div>
<a href="index.html" id="logo">
<h1>Patti Nearing</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.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying 80's glow.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>playing with drips.</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://facebook.com/patti nearing">
<img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon">
</a>
<p>© 2014 Patti Nearing.</p>
</footer>
</div>
</body>
</html>
</li>
</ul>
</section>
/********************
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
*********************/
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: 000;
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;
}
/********************
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;
}
a {
color: #6ab47b;
}
/* nav linl */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover{
color: #32673f;
}
9 Answers
Thomas Seelbinder
Courses Plus Student 1,223 PointsI would just work in Firefox right now. Maybe the support team will chime in regarding the issue with Chrome.
Michael Mahler
8,560 PointsFrom the looks of it, it seems "gallery" and "gallery li" are missing their id selectors. They should read: "#gallery" and "#gallery li".
:)
Patti Nearing
696 PointsMichael, I have learned a lot from all the people who have answered me. I re-posted the main.css coding so it shows EVERYthing, including the #gallery stuff. Still need to know what is wrong with my coding that it does not match the example in the video. Will appreciate your help !!!
Thomas Seelbinder
Courses Plus Student 1,223 PointsI am having the same exact issue. Are you using chrome by chance?
I just did a test with workspaces, and I changed my CSS with a very noticeable change. The change was taking your CSS and replacing mine with yours. This should have totally changed my site completely as I am using different colors. Still nothing changed, and it remained the same.
Is it possible that workspaces is having an issue?
Update: I tested it in Firefox and my changes are correct now. I would imagine you are using chrome, so log in on firefox, and you will see that your changes are actually there.
it's an issue with chrome.
Patti Nearing
696 Pointsyes, using chrome. I wonder if I should just delete the work from this video and start over, caue it was right a one time ???
Patti Nearing
696 PointsInteresting ---- so I have to download Foxfire ????? I have never used it -- ever !!!!
Thomas Seelbinder
Courses Plus Student 1,223 PointsIt's just as easy to use as any other browser. You should be ok with using it.
Patti Nearing
696 PointsThomas, I downloaded Firefox Now, when I open my workspace, it still does not show the two column display and does not show the color of the paragraph as light grey AND, my text in a different style and I can't see where to change it to a more readable (for me) style. aaarrrrgggghhhh!!!!!!!
Patti Nearing
696 Pointsok, I will try that and see what happens !! Thanks !!
Patti Nearing
696 PointsThomas, where did you disappear to ???