Select the image and set it to be a block element?

Question

We only added the display property in-line block in CSS in the lessons so far. The quiz question is asking me to add it to the about.html page when the lesson only showed me how to add it in the main.css file: nav li{ display: inline-block; } He only explained what a block element is and did not show us how to add it to an html file. This quiz question does not make any sense to me since the previous question was to add my image and paragraph text to my about.html page. I understand it needs to be in the html file first but how am I meant to understand if he only showed us how to add it to CSS??

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="Photo" class="profile-photo" display="block">
        <p> What ever you want to say goes here </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;
}

Answer 1 · 2016-01-24T17:43:14Z

January 24, 2016 5:43pm

Hey Kathryn,

I think you may be misunderstanding the question: Task 3 of the challenge asks to "Select the image and set it to be a block element." This is done in the CSS file, not the HTML file. So, just switch over to the CSS file (tabs at the top of challenge window) and add the code to select the image (img) and set it to block.

Hope that helps. Keep Coding! :)

Answer 2 · 2016-01-27T10:40:26Z

January 27, 2016 10:40am

Thank you! I realized yesterday I somehow skipped a lesson, the lesson that taught how to add the block element etc in CSS. I was very confused but now of course the question is relevant.

Welcome to the Treehouse Community

Looking to learn something new?

Kathryn Williamson

Kathryn Williamson

Select the image and set it to be a block element?

2 Answers

Jason Anders

Jason Anders

Kathryn Williamson

Kathryn Williamson