Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Make an About Page

select image and set it to a block element.

I tried .profile-photo{ display: block; } and img { display: block; } None is working. I'm confused as to what i am doing wrong.

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 gratt" class="profile-photo:display-block">
        <p> Hi my name is daphne, I ma a film director. I love to view the world thorugh a lens</p>
        <img {
             display: block;
             }>
      </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;
}

.profile-photo {
  display:block;
}
Codey Novice
seal-mask
.a{fill-rule:evenodd;}techdegree
Codey Novice
Full Stack JavaScript Techdegree Student 2,022 Points

Hey Daphne,

It looks like you mistyped your class name in your CSS file. That is why it is not working from that approach. Also, it looks like you tried to apply an inline style attribute in your 2nd <img /> tag, but the syntax is incorrect. I assume that you tried to apply an inline style attribute after your CSS file failed to recognize the mistyped class name. “profile-photo:display-block” is the class name from your html file, but you only have “.profile-photo” as your class selector in your CSS file. Your official class name is the entire string from beginning quote to ending quote.

Note that applying an inline attribute from within your html file will only apply to that one tag. For example, if you apply an inline style attribute to your 2nd <img /> tag, that style attribute will NOT apply to your 1st <img /> tag.

If you want to apply an inline style attribute to your <img /> tag inside of your html file, you could try the following in your about.html file: <img src="img/gratt.png" alt="photograph of gratt" style=“display:block” />

If you want to modify your image from your CSS file you could try one of the following: 1) .profile-photo:display-block { display: block; }

2) img { display:block; }

I did not run these options through an IDE, so I may have made a mistake. If it does not work, let me know, and I will try to run it all they way. Good Luck!

3 Answers

Muhammad Ehsan Hanif
Muhammad Ehsan Hanif
8,236 Points

Hi

Remove the img { display: block; } from your html. You can't place CSS like this within html.

Also in your img, class should be class="profile-photo" not class="profile-photo:display-block".

You can set the display to block through css either by img {display: block;} or use the profile-photo class.

Codey Novice
seal-mask
.a{fill-rule:evenodd;}techdegree
Codey Novice
Full Stack JavaScript Techdegree Student 2,022 Points

Looks like I pasted my answer in the comment section and not the answer section, so here it is again ;)

Hey Daphne,

It looks like you mistyped your class name in your CSS file. That is why it is not working from that approach. Also, it looks like you tried to apply an inline style attribute in your 2nd <img /> tag, but the syntax is incorrect. I assume that you tried to apply an inline style attribute after your CSS file failed to recognize the mistyped class name. “profile-photo:display-block” is the class name from your html file, but you only have “.profile-photo” as your class selector in your CSS file. Your official class name is the entire string from beginning quote to ending quote.

Note that applying an inline attribute from within your html file will only apply to that one tag. For example, if you apply an inline style attribute to your 2nd <img /> tag, that style attribute will NOT apply to your 1st <img /> tag.

If you want to apply an inline style attribute to your <img /> tag inside of your html file, you could try the following in your about.html file: <img src="img/gratt.png" alt="photograph of gratt" style=“display:block” />

If you want to modify your image from your CSS file you could try one of the following: 1) .profile-photo:display-block { display: block; }

2) img { display:block; }

I did not run these options through an IDE, so I may have made a mistake. If it does not work, let me know, and I will try to run it all they way. Good Luck!

Loek Weijts
Loek Weijts
6,159 Points

Hi,

You've .css in a .html document. You should always try to avoid putting css directly in html and try to seperate them.

But besides that you should remove:

    <img {
         display: block;
         }>

Thats css directly in a html tag. and im not sure about his one:

class="profile-photo:display-block"

I think it should be:

<img class="profile-photo">

corresponding with the css:

.profile-photo { display: block; }