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

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

Beginning to style the #gallery and no changes being applied, help!

Code below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>James Barrett | 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>James Barrett</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="images/numbers-01.jpg">
              <img src="images/numbers-01.jpg" alt="">
              <p>Experminetation with colour and texture</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-02.jpg">
              <img src="images/numbers-02.jpg" alt="">
              <p>Another cool image</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-06.jpg">
              <img src="images/numbers-06.jpg" alt="">
              <p>Created using photoshop. A powerful tool.</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-09.jpg">
              <img src="images/numbers-09.jpg" alt="">
              <p>Inspired by team treehouse</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-12.jpg">
              <img src="images/numbers-12.jpg" alt="">
              <p>The last piece of the portfolio but not the least</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/James_Barrett"><img src="images/twitter-wrap.png" alt="Twitter logo"></a>
        <a href="http://facebook.com/BarrettBoy"><img src="images/facebook-wrap.png" alt="Facebook logo"></a>
        <p>&copy; 2015 James Barrett</p>
      </footer>
      </div>
  </body>
</html>

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

body {
  font-family: 'Open Sans', 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: 'Changa One', 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;
}



/**************************
COLOURS
***************************/

/* 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: #6ab47b;
}

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

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

Everything has been going fine but now my #gallery won't style as well as the #gallery li etc... not sure where I am going wrong!

Jay Wellings
Jay Wellings
4,593 Points

Just need a bit more information, how exactly are you expecting / wanting this to behave?

3 Answers

Matt F.
Matt F.
9,518 Points
Matt F.
Matt F.
9,518 Points

Are you looking to have your li's float left?

If so, you need to change their display to inline-block

#gallery li {
  display: inline-block;
  float: left;
}
James Barrett
James Barrett
13,253 Points
James Barrett
James Barrett
13,253 Points

Sorry guys the code was in fact working the whole time, just a problem with workspaces was the issue. Thank you for your time though!

Michelle Williams
Michelle Williams
589 Points
Michelle Williams
Michelle Williams
589 Points

Hey James. What did you do to get your preview to update because I'm having the same problem with my workspace.