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
Dana Henderson
Courses Plus Student 1,042 Pointsfloat: left; not passing validation
The image gallery looks fine in preview with two collumns, it will not pass validation though.
Dana Henderson
Courses Plus Student 1,042 PointsI mean the step 3 exercise on Styling Web Pages and Navigation will not accept the float: left; in css3 to make 2 columns of images. The preview looks fine but when you check your work it says "bummer float images to the left". I have cut and pasted the exercise below:
Challenge task 3 of 4 Select the list items nested inside the gallery. Float them to the left and set the width to 45%.
Bummer! Be sure to float the gallery list items to the left.
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li a {
float: left; width: 45%; }
gallery li a {
margin: 2.5%;
color: rgb(130,85,0);
}
4 Answers
Dana Henderson
Courses Plus Student 1,042 PointsI finaly got it it should be:
gallery li a p {
float: left; width: 45%; }
Jason Anello
Courses Plus Student 94,610 PointsHi Dana,
I'm not sure how you got that to pass. It's not the correct answer and does not pass for me.
The challenge wants you to select the list items inside the gallery #gallery li {
You're selecting the paragraphs inside the links inside the list items inside the gallery. This would be the image captions from the project.
Scott Magdalein has the correct answer.
Scott Magdalein
1,667 PointsHi there, you're close. It looks like you're targeting the wrong element. The challenge says to "Select the list items", not the links inside the list items. So your code should look something like:
#gallery li {
float: left;
width: 45%;
}
Maria Victoria Reyes
17,731 Pointssometimes its a trick question, if it asks "float images to the left" maybe you have to specify gallery img { float:left; } ?
Sean Clipsham
1,664 PointsHi Everyone, thanks for taking the time to record all your work. I think I have it. It worked for me anyway. We do have to be careful in assuming that we are all addressing the same scenario. My question was worded "Selected the list items nested inside the Gallery. Float them to the left and set the width to 45%.
img { max-width: 100%; margin: 0; }
gallery {
margin: 0;
padding: 0;
list-style: none;
}
gallery li {
float: left; width: 45%; margin: 2.5%; color: maroon; background-color: #CCC; }
Correct me if Iam wrong, but I think I now remember what was being said about all the percents included in the above code.
We specify that images be at MAXIMUM 100% so that they never get any bigger than actual size when screen is zoomed in and out.
We set the #gallery to no width, margin, padding, so that there is no extra space around the entire gallery item, which consists of the items nested below it.
The specifications used in #gallery li are set to achieve the following: No matter what size the screen or maginification is: The list items (the images) will always take up only 45% of the space that exists on the screen. There will be margins of 2.5% to the right and left side of each image and 20.5% x2 between each pair of images, so you get 45% +45% + 2.5%+2.5% +2.5% +2.5% = 100%
I have to say that i forgot what the float: left; is all about.
Sean
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsAre you talking about the w3c validator?
What error message are you getting?