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
Francis Lamy
8,218 PointsCan't get the pictures to be side by side
I tried exactly what Nick asks us to do (or atleast I think I did, even by checking the video three times and making sure everything is the same), but I can't get the pictures to be side-be-side. What am I doing wrong?
CSS:
/*************************
PAGE: PORTFOLIO
*************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
HTML:
<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>
Moderator edited: Added some markdown so that the code renders properly on the forums.
2 Answers
Joe Dodd
Front End Web Development Techdegree Graduate 15,203 PointsHi Francis.
I noticed you said you're trying to get the pictures to be side by side. Are you sure you're targeting the right element in your HTML with the code above? In the code you've included, you're targeting a <nav> element with ID gallery. The styles you've applied to the gallery attribute might actually work on those list items, albeit with interesting results.
But it's not going to work for your actual photo gallery. Look back over your HTML document and try applying your ID attribute to the element containing your image code.
Jennifer Nordell
Treehouse TeacherGood catch! The nav shouldn't have the id of "gallery". It should be the other section with the list items containing the pictures!
Francis Lamy
8,218 PointsThanks Jennifer and Joe! Joe you were right, I added it to the element containing my image code and it worked! Now my pictures aren't symetrical but I'm guessing that's just the image sizes that are diferring.
Joe Dodd
Front End Web Development Techdegree Graduate 15,203 PointsSweet! Glad to hear you got it working.
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherHi there! I added some markdown to your code so that it renders properly here. You can see instructions on how to do this by looking at the "Markdown Cheatsheet" link at the bottom of the "Add an Answer" section on this page.
That being said, it's possible you didn't do anything wrong at all. Given that I don't see any blatant errors in your code, I think we should check a few basics. Are you positive your file is saved? If there's an orange dot on the tab, it hasn't been. I'm also wondering if maybe your browser has cached an older version of your page and is loading that instead. Does clearing the browser cache and then reloading the preview and refreshing help?