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 Image Captions

Karick See
PLUS
Karick See
Courses Plus Student 561 Points
Posted by Karick See
Karick See
Courses Plus Student 561 Points

Creating columns

In the lesson pertaining to turning an un-ordered list into two columns I'm not getting the same effect. I've checked my html and css for inconsistencies but I'm not seeing where I went wrong. Can someone help?

11 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Your navigation is not styled correctly. It should be set to display inline. You can also compare your code to the project files if that helps.

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

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

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}
Karick See
PLUS
Karick See
Courses Plus Student 561 Points
Karick See
Karick See
Courses Plus Student 561 Points

I think that's a step further than I am yet. The project files you linked to aren't helping, it's just notepad text.

Even with the nav suggestion you just made, it didn't change the columns. What I notice is that the footer rises to the top to make the second column...however the second column is supposed to begin with the third image in the gallery.

I'm sorry if I'm just not understanding... Just trying to get a hold on this.

Dustin Matlock
Dustin Matlock
33,856 Points

Karick, you might want to start from the beginning. Try to follow along with the project and duplicate what's being taught. It looks like you have a lot of things going on there. Take your time and try to understand the behaviors and what's going on when you add and remove code. Each property has a specific function and things can get complex in the cascade when your code blocks are all mixed around. Don't give up; take breaks and most of all make it something you like to do and figure out.

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Most certainly. Could you possibly post your code?

Karick See
PLUS
Karick See
Courses Plus Student 561 Points
Karick See
Karick See
Courses Plus Student 561 Points

sure, I'll post the html and the css.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kary See | 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>Kary See</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>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li> 
        </ul>  
      </section>
      <footer>
        <a href="http://twitter.com/karysee"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/karysee"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Kary See.</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: o.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: 3.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: #6ab47b;
}

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Looks like you're missing the header section so it will float.

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}
Karick See
PLUS
Karick See
Courses Plus Student 561 Points
Karick See
Karick See
Courses Plus Student 561 Points

I added this to my css:

/*********************************
HEADER
**********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%
}

and refreshed but nothings changed

Dustin Matlock
Dustin Matlock
33,856 Points

You are missing a semicolon on width.

Karick See
PLUS
Karick See
Courses Plus Student 561 Points
Karick See
Karick See
Courses Plus Student 561 Points

does it make a difference that I put my header section after my navigation section, rather than after the heading section?

Dustin Matlock
Dustin Matlock
33,856 Points

Yes, it has to do with the way CSS cascades.

Karick See
PLUS
Karick See
Courses Plus Student 561 Points
Karick See
Karick See
Courses Plus Student 561 Points

Right, so where should the Header section be placed?

ENERAL
**********************************/

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: o.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;
}



/*********************************
HEADER
**********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}



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

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points 
/**********************************
HEADING
***********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#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;
}
Karick See
PLUS
Karick See
Courses Plus Student 561 Points
Karick See
Karick See
Courses Plus Student 561 Points

K, did that. There's still no change.

/*********************************
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
**********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#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: o.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: 3.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: #6ab47b;
}

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

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