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 Ayaz Sadiq
Ayaz Sadiq
Courses Plus Student 5,361 Points

How do I select the image and set it to be a block element?

I'm on the learning objective and I entered <img src="img/gratt.png" alt="Photography of img/gratt" class="profile-photo"> It worked, but now it's asking for me to display the block element.

I tried entering the block element, but I had no luck. I typed this code in, but it said bummer: .profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

about.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/gratt.png" alt="Photograph of img/gratt" class="profile-photo" display: block>
        <p>Hi, I'm Ayaz Sadiq!  This is my design portfolio where I share all of my favorite work.  I'm NOT the person in this picture.  He is a man named Nick Pettit.  
           I don't have a profile picture.  As soon as I know how to make one, then I'll upload one on my page.  I'm learning how to design a webpage plus I want to learn 
           how to program in code.  I'm learning how to code as a hobby before I turn it into an occupation.</p>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

5 Answers

jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points

Ayaz, the easiest way is to use the class attribute, like this (in the main.css file):

.profile-photo {
  display: block;
}
Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

At the end of your img line you have "display: block". This needs to be removed. Then in your CSS file you should have this:

.profile-photo {
  display: block;
}

It looks like you've done some other things here that the challenge isn't expecting and that could be causing the failure as well.

jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points

Ayaz, Jennifer's right, you should remove the display: block that you added to your img tag. The challenge editor doesn't care, but if you ever tried to validate your html it wouldn't pass.

Ayaz Sadiq
PLUS
Ayaz Sadiq
Courses Plus Student 5,361 Points
Ayaz Sadiq
Ayaz Sadiq
Courses Plus Student 5,361 Points

Thank you jcorum and Jennifer. I'll see what I can do.

Ayaz Sadiq
PLUS
Ayaz Sadiq
Courses Plus Student 5,361 Points
Ayaz Sadiq
Ayaz Sadiq
Courses Plus Student 5,361 Points

Jcorum-I got my code to work. Jennifer-What other things did I do that the challenge wasn't expecting? My code ran so if you let me know, I can redo and rerun the code again.