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 julianderson Kaminski
julianderson Kaminski
632 Points

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

No idea what´s Selecting the image and set it to be a block element?

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 Julianderson Kaminski" class="profile-photo">

  <p> When Im not working Im surfing, playing the guitar or staying with family </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

Josh Elliott
Josh Elliott
10,669 Points

The css should be as follows..

img {

display: block; } This selects the image element and displays them on top of each other as opposed to next to each other.

julianderson Kaminski
julianderson Kaminski
632 Points

Thanks that worked out well!!

shadrackndacayisenga
seal-mask
.a{fill-rule:evenodd;}techdegree
shadrackndacayisenga
Python Web Development Techdegree Student 14,189 Points
shadrackndacayisenga
.a{fill-rule:evenodd;}techdegree
shadrackndacayisenga
Python Web Development Techdegree Student 14,189 Points

The term "Select" refers to pointing to the right img element your css will be refering to. The selecting is done in the CSS file and the img selector has to be specifically the one intended .

You can do that by preceeding the parent selctor to it in the CSS.

Example HTML.A. 

<ul>
<img src=" myimage.png" alt="my image">
</ul>

CSS.A.

ul img {
 * all the applying css here*
}
julianderson Kaminski
julianderson Kaminski
632 Points

Thanks for your attention Shadrack!!

Rich Inman
Rich Inman
2,173 Points
Rich Inman
Rich Inman
2,173 Points

<p>Remember that the Selector is part of a CSS Rule. For example:</p>

header {
     color: black;
}

The Selector in this statement is header, the curly braces surround the Declaration Block, color is the Property of the Declaration, and black is the Value of the Declaration.

When you're asked to select an HTML element, class attribute, or id attribute, you are being asked to do so using the Selector in the CSS rule.

If none of this helped you, back up a few videos because it's covered in that course.

julianderson Kaminski
julianderson Kaminski
632 Points

Thanks for your attention Rich Inman!!

julianderson Kaminski
julianderson Kaminski
632 Points
julianderson Kaminski
julianderson Kaminski
632 Points

Thank you very much for everyone´s attention - You guys are legends!! Big cheers all the way from Brazil