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

Posted by Tom Lawrence
Tom Lawrence
8,685 Points

Images and display: block;

Hello,

I am going the how to design a website and have a question.

The website has a couple of pages with images, the main galleryon the index page, and a picture on the about us page.

I noticed the CSS is a little different for both, the image in the "about us" page needs to have its display changed to block, but the images in the gallerypage done. I dont understand why, is it because when an image is part of a list item it becomes a block?

Here is some code from both pages:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tom Lawrence | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,800|Changa+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Tom Lawrence</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Blending modes and stuff like that</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>80s styles</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Some drips made using photoshop</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Some more stuff made in photoshop</p>
            </a>
          </li>        
        </ul>
      </section>
      <footer>
        <a href="http://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="http://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <p>&copy; 2014 Tom Lawrence.</p>
      </footer>
     </div>
  </body>
</html>

Here is the CSS for the page above:

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;

}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

Here is the code from the about page, which it was required to change display to block:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tom Lawrence | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,800|Changa+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Tom Lawrence</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/nick.jpg" alt="photograph" class="myphoto">
        <h3>About</h3>
        <p>Hi, welcome to my design portfolio where I share all of my work.</p>
        <p>If you would like to follow me on twitter, my username is <a href="http://www.twitter.com">@twitter</a></p>
      </section>
      <footer>
        <a href="http://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="http://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <p>&copy; 2014 Tom Lawrence.</p>
      </footer>
     </div>
  </body>
</html>

The CSS which has the display type changed to block, which we didnt do in the other page.

.contact-info {
  list-style: none;
  padding: 0;
  margin:0;
  font-size: 0.9em;

}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

Thanks

Alex Tasioulis
Alex Tasioulis
4,950 Points

Where is the contact-info class in this HTML? I don't see it.

Caroline Hagan
Caroline Hagan
12,612 Points

@tomlawrence The only display:block I can see in the code you've presented is for the A element?