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
Rick Wisneske
1,207 PointsLoosing "nav", "h1" and "h2" text color/ background color.
Can someone help me figure out what I have done? After adding the (#gallery li) and (#gallery li a p) to my CSS file the h1 and h2 text color changes and the header and nav backgrounds are gone or turned to white instead of green. Any help greatly appreciated!
/* CSS.MAIN */
/*********************************** 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; }
/*********************************** FOOTER ************************************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
}
/*********************************** PAGE: PORTFOLIO ************************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
gallery li a p {
margin: 0; padding: 5; font-size: 0.75em; 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; }
/* links */ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* slected nav link*/ nav a.selected, nav a:hover { color: #32673f; }
/* INDEX.HTML */
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>RWisneske | Design</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://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"> <h1>RWisneske</h1> <h2>Design</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 modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to creat 80's glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photosop brushes.</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://twitter.com/"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://www.facebook.com/"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> © 2015 RWisneske Design. </footer> </div> </body> </html>
2 Answers
Emma Willmann
Treehouse Project ReviewerLooks like you are missing a closing } after your color on your gallery li a p
Also, as gallery is an id, you would want to have a # in front of it.
/*********************************** PAGE: PORTFOLIO ************************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left; width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5;
font-size: 0.75em;
color: #bdc3c7;
}
Rick Wisneske
1,207 PointsCool thanks for the help!
Rick Wisneske
1,207 PointsRick Wisneske
1,207 PointsHey awesome! Thank you Emma for the quick response! I thought I was loosing my mind for a second. Haha!
I did have the # in with the gallery id but the # disapears when I copy and paste into the question window. Should I copy the css from the treehouse workspace and paste into sublime, then copy and paste into treehouse question window?
Thank you!
Emma Willmann
Treehouse Project ReviewerEmma Willmann
Treehouse Project ReviewerHey...no need to go to all that work to post your code....it's quite a bit easier than that. All you need to do is put 3 backticks on the line before your code and the line after it. Also, if you put what type of code it is after the opening backtick's, it'll help to do syntax highlighting. Like this ```css
If you look under the text box you are typing in, there is a Markdown Cheatsheet that shows an example.