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 Polish the Navigation and Footer

Posted by robinbehroozi
robinbehroozi
15,912 Points

I really don't understand the gallery example

Hi…I'm been really trying to understand the gallery example in the video, but it doesn't make any sense to me. I don't know where to start. Hmm, ok. Here's some code I've been trying…

<div id="wrapper"

<ul id="gallery"

<li<img src="x1a.jpg"</li <li<img src="x2a.jpg"</li <li<img src="x3a.jpg"</li <li<img src="x4a.jpg"</li </ul

</div

…then in css img { max-width:100%; }

wrapper{

margin:0 auto; }

/takes away the bullets in a list/

gallery{

list-style:none; }

gallery li{

float:left; width:45%; margin:2.5%; }

Why is there an id for both the gallery and the div? Why does the list item in the gallery 'float' left? I don't understand why the list-style is in the gallery, but then the float, width and margin are in the gallery li? Why can't the gallery {} contain the float, width and margin? If anyone can help, that'd be great.Thanks.

2 Answers

Diane Houghton
Diane Houghton
5,773 Points

The wrapper is the big box that holds everything together. It contains the gallery and any other content that may go inside it (such as sidebars). That's why it's a div. The gallery is a box inside the wrapper that contains an unordered list. The list items are little boxes inside the gallery. You want to have the little boxes float left, not the bigger gallery box. You also want those little boxes (list items) to have a width of 45% and a margin of 2.5% so they will all fit in a horizontal line across the page.

robinbehroozi
robinbehroozi
15,912 Points
robinbehroozi
robinbehroozi
15,912 Points

thanks Diane