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

HTML

Anton Bozhkov
Anton Bozhkov
5,730 Points
Posted by Anton Bozhkov
Anton Bozhkov
5,730 Points

I don't get why my #gallery id does not execute the rules in the css document

So this is a section from an HTML tutorial with Nick Petit. as you can see I have labeled the unordered list with the id gallery as you can see bellow <section> <ul id="gallery"> <il> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with colour and texture</p> </a> </il> <il> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photoshop</p> </a> </il> <il> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>80's style of glows</p> </a> </il> <il> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>drips created by photoshop brushes</p> </a> </il> <il> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a> </il> </ul> </section> Then in main.css file i have put down rules for the gallery id as shown below, but for some reason the images are not floated to the left:

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

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

gallery li a p {

margin: 0; padding: 5%; font-size:0.75em; color: #bdc3c7; }

May be I am missing something obvious but cannot figure it out.

3 Answers

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey there Anton,

the list item tags inside of your list should be called li instead of il. Maybe that will fix your problem. So to take one list item as an example:

       <li>
         <a href="img/numbers-01.jpg">
           <img src="img/numbers-01.jpg" alt="">
           <p>Experimentation with colour and texture</p>
         </a>
       </li>

I hope that helps! :)

redcamel2
redcamel2
4,751 Points
redcamel2
redcamel2
4,751 Points

you haven't put the id making on the gallery declarations in the css. In other words the code complier is looking for a tag like <a> but <gallery>

This is what it should look like

#gallery {

margin: 0; padding: 0; list-style: none; }

#gallery li {

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

#gallery li a p {

margin: 0; padding: 5%; font-size:0.75em; color: #bdc3c7; 
}

hope this helps and please make this a best answer.

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey there,

good spot! However I think this problem is because of the markdown that was formatted wrong. If you write a "#" symbol in front of a word here in the forums it will be formatted like a heading I think. :)

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

I'm sorry, I'll try to explain it again: Can you see that only gallery li a p {, gallery li { and gallery are written big and bold in Anton's question? This is because you can write markdown here in the Treehouse forums. When you write a "#" symbol in front of a word here it will be bigger and bold (formatted like a heading), so actually Anton had the "#" symbol for the id in his code, it was just formatted wrong in the forum.

Here I'm writing "#gallery" for an example now without formatting it as code:

gallery

redcamel2
redcamel2
4,751 Points

Right but that problem should accuse when use the 3 backscticks in the beginning and the end of your code segments..

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Thanks for telling me but I was already aware of that. I just wanted to explain why the problem you mentioned is probably not a real problem because it was a formatting issue instead of a code issue but like I already said: Good spot and if it wasn't the formatting it would've been a problem. :)

Anton Bozhkov
Anton Bozhkov
5,730 Points
Anton Bozhkov
Anton Bozhkov
5,730 Points

I actually had put the tags in my code but for some reason did not copy to my question. However i switched il with li and it works, so obvious but could not see it at first thank you.

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

No problem! :) You're welcome, glad you got it working!