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

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

Posted by Anouk Lejeune
Anouk Lejeune
3,505 Points

The challenge is asking me to select the image and set its property to block. In a html instead of CSS

the task I need to do in html screen:

I don't know how to set the property of my profile image to block in html. I would think that the class="profile-photo" and then write .profile-photo { display= block; }

in CSS was the way to do it. But my display in challenge is an html screen. I tried with <div= "block"> or class= "block">. But it are bummers.

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="Profile photo of Anouk lejeune" class="profile-photo">
        <p>My heart is into photography.My favorites are portrets, fashion photography and free work</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;
}

4 Answers

Chris Wiley
Chris Wiley
11,327 Points

If there is not a faded out CSS tab next to the HTML then use the "style" tag in the html so it will accept the display=block. close style tag.

Anouk Lejeune
Anouk Lejeune
3,505 Points
Anouk Lejeune
Anouk Lejeune
3,505 Points

Ok, now I see there was an CSS file underneath it. Ok question resolved.

Anouk Lejeune
Anouk Lejeune
3,505 Points
Anouk Lejeune
Anouk Lejeune
3,505 Points

I went back to the challenge, but there I don't get a CSS file. So I still don't know what to do.

Anouk Lejeune
Anouk Lejeune
3,505 Points
Anouk Lejeune
Anouk Lejeune
3,505 Points

Hey Chris,

Thanks for your answer. since i was already scrolled under the page, I didn't see or knew i had a faded out CSS tab. With your answer I found it.I passed the task now.

Chris Wiley
Chris Wiley
11,327 Points

Glad you got is sorted out. Happy coding.