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.

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

Example in this video is not working for me. I think "list-style" should be written differently.

In this video you show the code-

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

#gallery li{
    float: left;
    width: 45%;
    padding: 2.5%;
}

but for me list-style: none; only works in the li element like this-

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

#gallery li{
    list-style: none;
    float: left;
    width: 45%;
    padding: 2.5%;
}

is it the video or I do something wrong?

6 Answers

It should work fine if the id="gallery" is in your unordered list tag?

My css looks like:

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

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

And the html segment is:

<div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="Image on the website">
              <p>Experimentation with colour and texture</p>
            </a>
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,705 Points

It's a confusing one.

I've got mine set up to switch them off as in the same example as Erez... in the list item element not the unordered list element. But Nick's video clearly shows it working from the unordered list. ..

I can't explain why but either way the list item will definitely work as this where the disk is generated anyway, so my advice to erez sason would be to carry on with his method. :-)

You have a typo in your CSS:

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

#galler li {   <---- that ain't right! 
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

Steve.

Annd your URL for Twitter has too many 't's in it. ;-)

Thanks guys. I work on firefox, maybe it acts differently on differents browsers...

Yes, it may well look different with different browsers, unfortunately. I use Chrome and haven't had a problem with it.

Steve.

Having the same issue, I think. All code is correct, checked and rechecked, but pictures still staying as a line down rather than side by side. Hopefully it wont be an issue further along in the course.

Hi Dawn,

What browser are you using and can you keep your server running and post its link, please?

Steve.

I am using google chrome steve and thank you...hoping you mean this link lol...code over load lol

http://port-80-gvh8i417bj.treehouse-app.com/

Thank you for your time

Got it. I'm not sure where you are in the course - what do you think this should look like? You're clearly doing most of it right - it's looking pretty good!

Steve.

oh your a gem thank you so much. Always good to have second pair of eyes sometimes!!!!!! Yeah!

No problem!

Steve.

P.S. Follow me on Twitter - I'm OnlySteveH. :-)