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
Eric Leisenring
844 PointsThe images aren't dividing, and somehow my copywrite from footer is in main image. Help?
My images are still in a single column, and my © is in the first image. Somehow somewhere I made a boo but I cannot find it...here is the code to the html and css.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chevy Chase | Landshark</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Landshark</h1> <h2>Chevy Chase</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 blended modes.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Creating 80's styles of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips with photoshop.</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 ="https://twitter.com/eleiz11"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href ="https://www.facebook.com/maxwell.vonsilverhammer"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Landshark Society</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; }
img { 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; }
/*************************** Colors ****************************/
body { background-color: #fff; color: #999; }
header { background:#6ab47b; border-color: #599a68; }
nav { background-color: #599a68; }
h1, h2 { color: #fff; }
a { color:#6ab47b; }
nav { background: #599a68; }
nav a, nav a:visited { color: #fff; }
nav a.selected, nav a:hover { color: #32673f; }
/*************************** 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.55%; background-color: #f5f5f5; color: #bdc3c7; }
6 Answers
elk6
22,916 PointsRight, i see it now. You are missing a colon after your img max width and a semicolon after your h2 font size. So in the "General" section, in the img selector, put a colon after max-width.
So, like this:
img {
max-width: 100%;
}
Instead of:
img {
max-width 100%;
}
like you have now. This should fix the images.
And in the heading section you need to put a semicolon (;) after:
h2 {
font-size: 0.75em
}
elk6
22,916 PointsHi Eric,
You are closing your wrapper div after your footer. I think you should start by moving the div close ( </div> ) a little further up the page. Just after the ending of your section. And you are missing the body (opening and closing ) tag and the closing html tag in your HTML file.
For the column layout: You have put gallery in there with the proper styles but you are missing a selector. Gallery is an id so in this case you need an ID selector ( #gallery ). Same goes for wrapper and logo. They are both ID so they need the ID selector (#) to work.
Eric Leisenring
844 PointsThere it is...copy and paste boo boo. That fixes the footer thing, and i see where my gallery columns weren't dividing. However, now they divide but they are overlapping with no space. I am reviewing the #gallery li to make sure it is correct. I had the margin: at 2.55%, fixed it to 2.5% but now the images overlap.
elk6
22,916 PointsCan you post the new code so i can see what's going on?
Eric Leisenring
844 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chevy Chase | Landshark</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Landshark</h1> <h2>Chevy Chase</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 blended modes.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Creating 80's styles of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips with photoshop.</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> </div> <footer> <a href ="https://twitter.com/eleiz11"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href ="https://www.facebook.com/maxwell.vonsilverhammer"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Landshark Society</p> </footer> </body> </html>
/*************************** 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 ****************************/
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 ****************************/
body { background-color: #fff; color: #999; }
header { background:#6ab47b; border-color: #599a68; }
nav { background-color: #599a68; }
h1, h2 { color: #fff; }
a { color:#6ab47b; }
nav { background: #599a68; }
nav a, nav a:visited { color: #fff; }
nav a.selected, nav a:hover { color: #32673f; }
Eric Leisenring
844 Pointsits not copy and pasting correctly those # id selectos and closes <body> are there.
Eric Leisenring
844 Pointsapparently I need new glasses. I swore I combed it over several times...SMH...Thanks again.
elk6
22,916 PointsNo problem. Happy to help.