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

CSS

Posted by Zahid Ceron
Zahid Ceron
489 Points

Style the portfolio: Columns won't show.

Hey guys, so I did everything as on the video, but I can't get the columns to show. I tried everything, and searched on other questions but couldn't find an answer. I'll post my code first will be my html documnents, and then the css one. Also thank you in advance.

Code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Zahid || Desginer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,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>Zahid Ceron</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html"> 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>Some image I got from the Internet.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>another one.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Annnnd another.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>AAAAND ANOTHER.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Last one.</p> </a> </li> </ul> </section> <footer> <a href="https://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="https://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Zahid Ceron. </p> </footer> </div> </body> </html>

and here is the 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; }

/********************************************************** 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 clear: both; }

/********************************************************** PAGE PORTFOLIO ***********************************************************/

nav ul,

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; / site body */ color: #999; }

/* blue header */ header { background:#4775FF; border-color: #6C91FF }

/* nav background on nombile*/ nav { background: #6C91FF; } /* logo links / h1, h2 { color: #fff; } / colored links */ a { color: #4775FF; }

/* nav link / nav a, nav a:visited { color: #fff; } / selected nav link */ nav a.selected, nav a:hover { color: #3252B2; }

1 Answer

Eric Buchmann
Eric Buchmann
15,080 Points

It looks correct, but the CSS didn't get pasted into a codeblock so it's difficult to tell. Are you doing something like this with the gallery li?

#gallery li {float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7;}

Note the addition of # in front of gallery to tell it to select the gallery id.

Zahid Ceron
Zahid Ceron
489 Points

yes sir! If you look below the html code, i also include my css.

Eric Buchmann
Eric Buchmann
15,080 Points

Check this out: http://test.zenoval.com/ You can at least see that the columns do work after some minor fixes.

I put your html and css up on a site. There were a couple of things that I was able to fix up. Make sure you have the correct id targeted in your CSS. For the lines dealing with gallery li, logo, and wrapper they all need to have a # in front of them (like #gallery li, #logo, #wrapper). That way you're actually targeting the element on the page with that ID.

In the footer part of the CSS you're missing a ; after color: #ccc, which would cause it to drop the clear:both part of the CSS. Also some of your commenting near the bottom for body looks like it's commenting out a bit too much and is causing some issues with the CSS.

Zahid Ceron
Zahid Ceron
489 Points

Thank you so much, sometimes it's just little mistakes that I miss. Thank you lots again.