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
Derryl Frazier
Courses Plus Student 2,011 Pointstried almost everything. page not showing as displayed in example. (common issue Im assuming)
well, images are too large, not shrinking, 1 column, and isk , maybe a few other problems too. I believe i have the code exactly as displayed. maybe you all can take a look.
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Derryl Frazier | 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,800italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/Main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Derryl Frazier</h1> <h2>Front End Web Designer</h2> </a> <nav> <ul id="gallery"> <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> <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 style of glows</P> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt""> <p>Drips created by photoshop brushes</P> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt""> <p>Creating shapes using repitition</P> </a> </li> </ul> </section> <footer> <a href="https://twitter.com/_bossware"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="https://www.facebook.com/derryl.frazier.5"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2016 Derryl Frazier </p> </footer> </Div> </body>
</html>
CSS:
/******************************* general *******************************/
body{ font-family: 'open sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
image{ max-width: 100%; }
/******************************* Heading *******************************/
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; }
/******************************* Footer *******************************/ footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;
}
/******************************* 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;
/Top page logo text/ h1, h2 { color: #fff; }
/links/ a{ color: #6ab47b; }
/nav link/ nav a, nav a:visited { color:#fff; }
/hover over nav link/ nav a.selected, nav a:hover { color: #32673f; }
/nav background on mobile/ nav { background: #599a68; }
Derryl Frazier
Courses Plus Student 2,011 Pointsabsolutely. Ive even tried several other browsers. However, I have run the css code through a invalidator and am getting 2 error messages regarding parse errors for line 133 in the code. here it is again, Ive marked a note at the bottom of code for 131-133. not sure if thats whats causing the problem
/******************************* general *******************************/
body{ font-family: 'open sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
image{ max-width: 100%; }
/******************************* Heading *******************************/
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; }
/******************************* Footer *******************************/ footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;
}
/******************************* 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;
/Top page logo text/
h1, h2 { color: #fff; }
/links/ a { color: #6ab47b; }
/nav link/
nav a, nav a:visited { color:#fff; }
/hover over nav link/ nav a.selected, nav a:hover { color: #32673f; }
/********************************************************************************* LINES 131-133 BELOW
/nav background on mobile/ nav { background: #599a68; }
5 Answers
Jennifer Nordell
Treehouse TeacherI think I see the problem. You've given the unordered list inside of your nav the id of "gallery". Try removing the id from there and place it in the unordered list inside of "wrapper".
Change this:
<nav>
<ul id="gallery"> <!-- REMOVE id from here --->
<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> <!--- place id HERE --->
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt"">
<p>Experimentation with color and texture</P>
</a>
</li>
Derryl Frazier
Courses Plus Student 2,011 Pointsyes im using nicks pics. I will try that but i put it there because nick did. Thats why we use the # in css right? when using an id in html? I'll let you know how it comes out.
Derryl Frazier
Courses Plus Student 2,011 Pointsnope, no fix there .
Jennifer Nordell
Treehouse TeacherRight we use the # to target an id. I think maybe you managed to give the incorrect element the id of gallery. Right now your nav bar has the id of "gallery" and I'm fairly sure the actual gallery should have the id of "gallery" :)
Derryl Frazier
Courses Plus Student 2,011 Pointsi know ur trying to help lol idk anymore. maybe ill just move on n see where things go with it
Jennifer Nordell
Treehouse TeacherMaybe so. But I'd be interested to see what your html looks like currently :)
Jennifer Nordell
Treehouse TeacherOk the only line I see that is definitely wrong is this one:
image{ max-width: 100%; }
It should be:
img{ max-width: 100%; }
Try changing that one and see if you notice a difference. It's in the wrapper near the top of your css.
Derryl Frazier
Courses Plus Student 2,011 Pointswhat do u mean the actual "gallery"? Im pretty sure I can set the name to anything as long as its matching in the style seet
Derryl Frazier
Courses Plus Student 2,011 Pointsya Jennifer Nordell ill definitely let u know how things turn im gonna try your nav suggestion now
Jennifer Nordell
Treehouse TeacherI mean that in the code you posted at the beginning you have this:
<nav>
<ul id="gallery">
<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>
Here the nav bar with the links to your different pages has the id of "gallery". When I say "actual gallery" I mean the place where you're displaying the artwork. Which is the second unordered list inside your section element.
<section>
<ul> <!-- THIS should have the id of "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 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 style of glows</P>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt"">
<p>Drips created by photoshop brushes</P>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt"">
<p>Creating shapes using repitition</P>
</a>
</li>
</ul>
Derryl Frazier
Courses Plus Student 2,011 Pointsits funny that you point that out because I had noticed that before and later made somechanges n made matters worst so i executed undo on everything n brought that back. thanks for pointing it out. That handles the image resize but not the issue of the 1 column, and bullets.
Jennifer Nordell
Treehouse TeacherThe markdown can be weird I know. But when I look at your CSS in the post here I don't see a # before the wrapper and other parts with an id. I'm assuming they have one in the file but just didn't print out here?
Derryl Frazier
Courses Plus Student 2,011 Pointscorrect lol
Jennifer Nordell
Treehouse TeacherI'm really trying to help, but not immediately seeing the problem Did you happen to upload your own pictures to use, or are you using Nick's?
Derryl Frazier
Courses Plus Student 2,011 Pointskk ill do that now
Derryl Frazier
Courses Plus Student 2,011 PointsJennifer Nordell You are awesome <3 thank you .
Derryl Frazier
Courses Plus Student 2,011 PointsJennifer Nordell You are awesome <3 thank you .
Jennifer Nordell
Treehouse TeacherHeh thanks. But I prefer to think of myself as just extremely persistent :)
Derryl Frazier
Courses Plus Student 2,011 Pointsand for that... you are awesome haha
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherOk, removed my answer since we've confirmed that you are linking to your stylesheet. Will review the code and see if I can see any issues. You said you've tried about everything, but I have to ask. Have you tried clearing your browser cache and reloading the page?