select image and set it to a block element.

Question

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;
}

Answer 1 · 2017-03-01T06:56:01Z

March 1, 2017 6:56am

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.

Answer 2 · 2017-03-01T07:07:58Z

March 1, 2017 7:07am

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!

Answer 3 · 2017-03-01T07:23:42Z

March 1, 2017 7:23am

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:

corresponding with the css:

.profile-photo { display: block; }

Welcome to the Treehouse Community

Looking to learn something new?

Daphne Jomo

Daphne Jomo

select image and set it to a block element.

Codey Novice

Codey Novice

3 Answers

Muhammad Ehsan Hanif

Muhammad Ehsan Hanif

Codey Novice

Codey Novice

Loek Weijts

Loek Weijts