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

Help!! how do I chage the links(portfolio, about, contact) inline with each other. Also, how I put the links at the top.

1 Answer

Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points

Hey DeAndre. Nice to hear from you here on the forums. I hope that you're enjoying your journey here on Treehouse. Trust me, you're gonna love it! Just don't give up on your path to success = ).

I've noticed an error in your code, mostly regarding the CSS selectors. The comma ( , ) allows you to include multiple selectors in one CSS rule, meaning instead of writing 3 CSS rules with the same declaration blocks (same properties and propertie values) 3 times, you can include multiple CSS selectors in one rule; we can this DRY principle - Don't repeat yourself, meaning that we should never write the same thing over and over again and repeat the code over time. For example:

/* It could be written like this */

    div#left {
        margin: 0;
        padding: 0;
        display: inline-block;
        width: 33%;
        float: left;
    }

        div#center {
        margin: 0;
        padding: 0;
        display: inline-block;
        width: 33%;
        float: left;
    }

        div#right {
        margin: 0;
        padding: 0;
        display: inline-block;
        width: 33%;
        float: left;
    }


/* But it also could (and most probably should!) be written like this */

    div#left, div#center, div#right {
        margin: 0;
        padding: 0;
        display: inline-block;
        width: 33%;
        float: left;
    }

/* Notice the comma there in the CSS selectors line */

Once again the comma ( , ) in the CSS selectors will allow you to target multiple HTML elements at once, in one CSS rule.

I assume the Nick was using the greater than sign ( > ) that is known as a "direct child selector". It is a bit more specific than just writing html elements one after another (without comma!) as it has one more condition; not only that one HTML element must be the child of the HTML written before it in the CSS selector line, but it also must be it's direct child. In the example you've provided:

#galler{
  margin:0;
  padding:0;
}

#gallery, li {
  float:left;
  width: 45%;
  margin: 2.5%;
  background-color:#f5f5f5;
  color:#bdc337;
  list-style:none;
}

#gallery, li, a, p{
  font-size:0.75em;
  color: #bdc3c7;
}


/* Instead of using "multiple selector" - (comma), you should either delete the comma sign and leave it as is or use the greater than sign ( > ) - "direct child selector" */

#gallery {
  margin:0;
  padding:0;
}

#gallery > li {
  float:left;
  width: 45%;
  margin: 2.5%;
  background-color:#f5f5f5;
  color:#bdc337;
  list-style:none;
}

#gallery > li > a > p {
  font-size:0.75em;
  color: #bdc3c7;
}

Also, be aware of the typos, as those are the ones that can completely mess up your code; even if you forget one letter it can be disastrous some times = ). *Hint: #galler

In addition, to actualy position them inline there's a few CSS properties that you should include in the code, which I think Nick will provide later on in the course (if he didn't already). But one possible solution is as follows:

nav,
nav > ul {
  width: 100%;
  padding-top:0;
  line-height: 1.5;
}

nav > ul > li {
  display: inline-block;
  text-align: center;
  width: 33%;
}

nav > ul > li > a {
  text-align:center;
  padding: 5px 10px;
}

Happy coding! And don't feel stressed if you didn't get it working the first time, it happens to all of us even after the months and months of practice. Just keep learning and never give up! I'm sure you'll make it. Feel free to stop by the forums if you ever feel lost in the code, or just have a story that you'd like to share with the students.

Best wishes DeAndre