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 How to Make a Website Adding Pages to a Website Make an About Page

Posted by cathy mitchell
cathy mitchell
8,249 Points

select an image and set it to be a block element

I have done all the suggested advise and it still gives me the error that have you set the profile image property to be blocked. Now I am wondering if I am putting it in the right place?????

<section> <img src="img/gratt.png" alt="nick.jpg" class="profile-photo"> <p> nick likes to experiment with color and texture </p> img { display: block; } </section>

Christopher Carrasco
Christopher Carrasco
20,679 Points
Christopher Carrasco
Christopher Carrasco
20,679 Points

To select an img element with the syntax you are using, it should be between a style tag and placed inside the head element like so.

         <head>
              <style>
                   img { display: block;}
               </style>
         <head>
         <body>
             <img src="img/gratt.png" alt="nick.jpg" class="profile-photo">
             <p> nick likes to experiment with color and texture </p>
         </body>

Since the img has a class you could also set the img block referencing it's class name using a dot before the class name 'profile-photo'.

         <head>
              <style>
                   .profile-photo { display: block;}
               </style>
         <head>
         <body>
             <img src="img/gratt.png" alt="nick.jpg" class="profile-photo">
             <p> nick likes to experiment with color and texture </p>
         </body>

Lastly you could style the img inline within the html img tag (Not a good practice doing it this way, but does get the job done)

         <body>
             <img src="img/gratt.png" alt="nick.jpg" class="profile-photo" style="block;">
             <p> nick likes to experiment with color and texture </p>
         </body>

Hope you get it working.

3 Answers

Melisa Hamilton
Melisa Hamilton
11,729 Points

There should be a second tab at the top, labeled CSS/Main.css. That is where you would put your CSS.

cathy mitchell
cathy mitchell
8,249 Points

here is what I put in the second tab of CSS and I still got the error. What on earth am I doing wrong!!!!!! Here is my code.

nav li { img { display: block; }

It is under the nav li {. I have been working on this since my time 6:00 AM and it is 10:41 AM my time now.

Melisa Hamilton
Melisa Hamilton
11,729 Points
Melisa Hamilton
Melisa Hamilton
11,729 Points

You shouldn't have to call the nav li. You'll want your CSS to look like this: 

img {
display: block;
}

This is because the 'img' selector is specific enough for the browser to know what to apply the style to.

cathy mitchell
cathy mitchell
8,249 Points

Woooohoooo!!!!!!!! Thank you Melisa!!!!!! I was in the wrong spot and you sent me to the right spot. you are the bomb!!! thanks a bunch. I knew something had to be wrong. I new I had the code right but something just wasn't working. I tried several places.

Melisa Hamilton
Melisa Hamilton
11,729 Points
Melisa Hamilton
Melisa Hamilton
11,729 Points

Hurray!!! Your welcome! I'm so glad you were able to figure it out! It's so frustrating when you know your on the right track, but not sure what your doing wrong.

Been there, done that. lol