Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Margins and image sizes

I think I have followed step by step, but I cannot seem to figure out how to get the images down to 45%, so mine are still huge and overlapping. There is a rt side margin but no left, and no space between the images. Here is my CSS layout:

/******************
GENERAL
******************/

body {
  font-family:'Playfair Display', serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
text-decoration: none;
}

image {
  max-width: 100%;
}

/******************
HEADING
******************/

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Oswald', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/******************
NAVIGATION
******************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

/******************
FOOTER
******************/

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc
}

/******************
PAGE: PORTFOLIO
******************/

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

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

/******************
COLORS
******************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices*/
nav {
  background: #599a68
}

/* logo text */
h1, h2 {
  color: #fff
}

a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Could someone please help me? Thank you!

4 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Hi sean montgomery

Here's your CSS for the images:

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

img.gallery is a specific CSS selector that translates to "select all img tags that ALSO have the class gallery applied to them. There is no gallery class applied to any of your images. For example, here's the html for one of the gallery images:

 <img src="img/numbers-01.jpg" alt="">

In other words the style above won't work because the HTML is missing the class. For that CSS style to work you'd need to add class="gallery" to each image like this:

 <img src="img/numbers-01.jpg" alt="" class="gallery">

However, there's an easier way, but you need to change a bit of your HTML. For the unordered list (the <ul> tag) you have this code:

<ul id=".gallery">

You should not have a period before gallery in the HTML, instead it should be like this:

<ul id="gallery">

After you make that change, then change that one CSS style to look like this:

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

#gallery img is a selector that translates to "apply this style to all img tags inside another tag with the ID of gallery

That should get your project back on track. Let us know if that worked.

Dave, thank you. That got the images down to 45% and in two columns. One last thing is that somewhere along the tutorial i missed how we get the paragraphs to be under the images. mine alternating to the left and right of each image, where in the structure can i change that?

Michael Lawinger
Michael Lawinger
33,581 Points

Wow, some complex stuff going on, let me try and help. First you see in HTML where you wrote <ul id=".gallery"> There should be no period before gallery and you should change the CSS to be #gallery and img#gallery instead. So here's the steps...

  1. Change the HTML From <ul id=".gallery"> to <ul id="gallery"> Get Rid of the Period
  2. You were right the first time it was gallery li not img gallery. So change the code in the CSS from: gallery to #gallery.

So this is what it will look like for the first part of the CSS:

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

Lastly, as I was saying, you were right with the li, so change gallery img.gallery to #gallery li. That second part of the CSS put together will be

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

Altogether it will be:

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

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

I know the concepts are tough I hope you understood why the changes happened so you can reuse and replicate the code!!!

Michael Lawinger
Michael Lawinger
33,581 Points

Well I'm not 100% because there's no HTML included, but I think there might be 2 problems. One is that you're selected lists instead of images to apply that 45% to. If you changed it img.gallery it might work. Another problem I see is that you aren't writing it as a class with the . before. I think it should be .gallery if I remember the project right. Am I correct on that and hope it helps!

Thanks Michael. Here is my HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sean Montgomery | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald|Playfair+Display:400,400i" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>  
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Sean Montgomery</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>This is an image of the number 2.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>It's the number 6.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>This is the number 9.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Just number 12.</p>
            </a>  
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/montymonty41"><img src="img/twitter-wrap.png" alt="twitter logo"></a>
        <a href="http://facebook.com/seancmont"><img src="img/facebook-wrap.png" alt="facebook logo"></a>
        <p>&copy; 2017 Sean Montgomery.</p>
      </footer>
    </div>  
  </body>  
  </html>

I changed the second part to img.gallery and the images went back to one column.

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

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

Where else should I add a period?