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 Amanda Baldwin
Amanda Baldwin
2,983 Points

Setting a image to be a block element.

I am having some trouble with figuring out how to set a image to be a block element.

I thought I had to do this...

display: block;

but for some reason it didn't work. Can you please help me to figure out how to do this? Thanks :)

about.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Amanda Baldwin | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id= "logo">
        <h1>Amanda Baldwin</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="Photogragh of Amanda Baldwin" class="profile-photo" display: block;>
        <p> Hi, I am Amanda Baldwin! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy running, playing games, drinking good coffee, and more.</p>
        <p>If you'd like to message me on Email, my email is <a href="https://mail.google.com/mail/u/0/#inbox?compose=new"> amanda.baldwin0527@gmail.com </a></p>
      <h3>About</h3>
      </section>
      <footer>
        <a href="https://mail.google.com/mail/u/0/#inbox?compose=new"><img src="img/Email-logo.png" alt="Email logo" class="social-icon"></a>
      </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;
}

4 Answers

Manuel Pascual
Manuel Pascual
4,676 Points
Manuel Pascual
Manuel Pascual
4,676 Points

You forgot to write the style="" attribute, you did this: <img src="img/gratt.png" alt="Photogragh of Amanda Baldwin" class="profile-photo" display: block;> and the correct form is: <img src="img/gratt.png" alt="Photogragh of Amanda Baldwin" class="profile-photo" style="display: block;">

Amanda Baldwin
Amanda Baldwin
2,983 Points

Oh my bad...thanks so much Manuel Pascual!

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

If you want to apply styles directly to a tag in HTML you need to use the style="" attribute.

<img src="img/gratt.png" alt="Photogragh of Amanda Baldwin" class="profile-photo" style="display: block;">

This isn't recommended because the styles should be all be in the CSS. It would be better to leverage a class/id selector to change the style of a particular image.

.profile-photo {
   display: block;
}
Bo Christensen
Bo Christensen
5,924 Points
Bo Christensen
Bo Christensen
5,924 Points

Have you tryed <img src="img/gratt.png" alt="Photogragh of Amanda Baldwin" class="profile-photo" style:"display: block">

since display: block belongs to css and not html.

maybe add it to your class .profile-photo in css