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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Chris Harman
Chris Harman
2,462 Points
Posted by Chris Harman
Chris Harman
2,462 Points

Columns not showing up after coding the 'Style the Portfolio' video.

I followed along with Nick for the video and my images are not showing up two wide on my page at any size. I have quadruple checked my HTML and CSS and can't figure it out. I don't want to keep going until I figure this out. Any suggestions/help/guidance would be greatly appreciated! -Thanks.

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

We need to see your code to provide help.

2 Answers

Chris Harman
Chris Harman
2,462 Points
Chris Harman
Chris Harman
2,462 Points

I was thinking that but wasn't sure if I could/should post it here. So, here is the HTML (CSS to follow at end)--

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>The notis Project | a creative culture </title> <link rel="stylesheet" href="css/reset.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.htm" id="logo"> <h1>The notis project</h1> <h2>a creative culture</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/addison2.jpg"> <img src="img/addison2.jpg" alt=""> <p>Addison</p> </a> </li> <li> <a href="img/isabel.jpg"> <img src="img/isabel.jpg" alt=""> <p>Isabel</p> </a> </li> <li> <a href="img/noname.jpg"> <img src="img/noname.jpg" alt=""> <p>Abbee</p> </a> </li> <li> <a href="img/emilybw.jpg"> <img src="img/emilybw.jpg" alt=""> <p>Emily</p> </a> </li> <li> <a href="img/mallory.jpg"> <img src="img/mallory.jpg" alt=""> <p>Mallory</p> </a> </li> </ul> </section> <footer> <a href="http://www.facebook.com/notis.us"><img src="img/facebook.png" alt="Facebook logo"> </a> <a href="http://www.instagram.com/notis_us"><img src="img/instagram.png" alt="Instagram logo"></a>

            <p>&copy; 2014 the notis project.</p>
        </footer>
    </div>
</body>

</html>

----------And now the CSS-------------------

/* ************************** GENERAL **************************** */

body { font-family: 'Open Sans Condensed', 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: 'Open Sans Condensed', sans-serif; margin: 15px 0; padding: 5px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2{ font-size: 0.75em; margin: -5px 0 0; font-weight: normal; padding: 5px 0; }

/* ************************** 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: #000; border-color: #599a68; }

/* nav background on mobile */

nav { background: #112121; }

/* logo text */

h1, h2 { color: #fff; }

/* links */

a { color: #111121; }

/* nav link */

nav a, nav a:visited { color: #fff }

/* selected nav link */

nav a.selected, nav a:hover { color: #cccccc; }

Thank you so much for any help you can give here. Truly appreciated.

Have a great day!

Chris

Chris Harman
Chris Harman
2,462 Points
Chris Harman
Chris Harman
2,462 Points

Hello again--I figured it out. I had a semicolon where I need a colon. Shoot. I had looked at the code for hours and don't know how I kept missing that.

Thanks again. Have a great rest of the day.