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 Styling Web Pages and Navigation Style the Portfolio

Kelsey Nagle
Kelsey Nagle
689 Points
Posted by Kelsey Nagle
Kelsey Nagle
689 Points

not getting the proper results using #gallery

I followed along exactly with Nick's example but my end result is coming out completely different. The images are still huge and in 1 column and the nav tab is messed up.

Kelsey Nagle
Kelsey Nagle
689 Points
Kelsey Nagle
Kelsey Nagle
689 Points

heres my CSS code- i added the gallery id properly in the index.html

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

body {
  font-family: 'PT Sans Caption', sans-serif;
}

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

a {
  text-decoration: none;
}

img{
  max-width: 100%;
}


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

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

h1 {
  font-family: 'Quicksand', 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; /* margin values: top, left/right, bottom */
  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 */
nav {
  background: #599a68;
}

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

/* links */
a{
  color: #fff;
}

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey there.

Could you post up your HTML as well?

Might be worth setting up a code pen :) (http://codepen.io/)

Your CSS looks good but you do have an error at the bottom. The space need to be removed from the :visited pseudo class :)

Kelsey Nagle
Kelsey Nagle
689 Points
Kelsey Nagle
Kelsey Nagle
689 Points

heres my HTML 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kelsey Nagle | Student</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Quicksand:400,700|PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Kelsey Nagle</h1>
        <h2>Designer</h2>
      </a>  
      <nav>
        <ul id="gallery">
          <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>
          <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>playing with blending things in photoshop</p>
            </a>
          </li><li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>trying to create 80s style glows</p>
            </a>
          </li><li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>drips using photoshop brushes</p>
            </a>
          </li><li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>creating shape using repetition</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/kelcnaygul"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="https://www.facebook.com/kelsey.nagle"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2015 Kelsey Nagle</p>
      </footer>
    </div>
  </body>
</html>

3 Answers

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

This is usually due to typeo's See if you are missing a color or a semi-colon or just see if you can find any misstakes. Scan the code carefully.

Also, you can post the code here and we can take a look for you. Without the code it's very hard for us to see what's going on.

Nevermind, you just posted the code. I was too fast. Let's take a look.

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

Your gallery ul is inside of the nav tags. That is what is causing your header to look like that. You need to move this inisde the section. It will solve the large image problem as well.

So, the ul inside the nav in your html does not need a class or id. The ul inside the section needs the id off gallery.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey. Try this :)

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

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

#gallery li {
  margin: 2.5%;
  color: #bdc3c7;
  display: inline-block;   /* change this line to 'block' if you want the mobile menu effect :) */
}

#gallery a {
  background-color: #f5f5f5;
  display: block;
  /* add the padding here to add a more clickable area to you links*/
}

Read the notes above to change your nav bar about.

EDIT:

for the images, try 

section ul {
  list-style: none;
}

section ul li {
  width: 50%;
  margin: 0 auto;
}

 a > img {
    max-width: 500px; /* or whatever max width :) */
    height: auto;
}