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 CSS: Cascading Style Sheets Center the Wrapper

Daisy Lloyd
Daisy Lloyd
1,472 Points

Orange background is not above the pictures? What am I doing wrong?

Q1. Why is my orange background not showing above the top picture? Q.2. Why do I have black dots next to each picture? Q3. Most importantly, how do I paste my coding to show you?

Daisy Lloyd
Daisy Lloyd
1,472 Points
a {
  text-decoration: none; 
}

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

Hey Daisy, you can paste your code like so which will drastically help to answer Q1 as well as Q2 :P

code

Daisy Lloyd
Daisy Lloyd
1,472 Points

here's the html...

  </head>
  <body>
    <header>  
      <a href="index.html">
        <h1>Daisy Ann Lloyd</h1>
        <h2>Digital Marketer</h2>
        </a>
        <nav>
         <ul>
          <li><a href="index.html">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 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 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/daisy_a_l"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <p>&copy; 2015 Daisy Ann Lloyd.</p> 
       </footer>
      </div>
    </body>
</html>

Daisy, you must wrap your code as shown in the Markdown Cheatsheet/in that gif below in order for it to render properly.

It should look similar to this when you are posting it (Use Backtick, Not (single quote) ' though):

'''

//Your Code Here

'''

Daisy Lloyd
Daisy Lloyd
1,472 Points

Oops I didn't wrap it but hopefully this link now shows the html...cant figure out answer to Q1. but Q2. should be answered later on apparently :-) http://www.codeshare.io/dKBvT

Hi Daisy,

Treehouse recently launched a new snapshot feature in workspaces so that you can share your entire workspace.

Here's more info about it: https://teamtreehouse.com/forum/workspace-snapshots

This would be the easiest way for us to help you with your problem.

For those times when you need to post code in the forums there's this thread: https://teamtreehouse.com/forum/posting-code-to-the-forum

It shows you how to post both code blocks and short pieces of inline code.

Could you explain what differences you see between your orange background and the one in the video? In the video it extends a little past the top of the 1st picture. Where does yours start?

I need to remember that we now have snapshots and to encourage that. Thanks, Jason!

You're welcome.

I almost forgot about it myself. :)

3 Answers

Sam Baines
Sam Baines
4,315 Points

Hi Daisy,

Your background color isn't showing because you have used the wrong property name in your css in the above example - you just have background rather than background-color. And as far as the black dots go next to your images (which are actual list items) try using the css list-style: none; rather than text-decoration and on a li selector. All like below:

li {
list-style: none;
}

#wrapper {
background-color: orange;
}

Hope this helps.

Hi Sam,

It's fine to use the shorthand background when setting a background color. I think the background is showing up but the boundaries of it are maybe not the same as in the video.

Daisy Lloyd
Daisy Lloyd
1,472 Points

Hi, yes that is right Jason, the background is showing up with the boundaries are not the same. It doesn't extend above the first image - like it shows on the video, instead the background starts where the picture does. Does that make sense? Thanks for the heads up about snapshots too!

Sam Baines
Sam Baines
4,315 Points

Thanks Jason - didn't realise you could shorthand your background property like that, so that's me learning something new. Daisy any chance you can post your CSS code for this problem and then maybe someone can help you with it further?

Daisy Lloyd
Daisy Lloyd
1,472 Points

I did post my CSS code - you commented on it and stated that I used the wrong property, which we have now established that I haven't because you can use shorthand. Also a link to my html is above.

Sam Baines
Sam Baines
4,315 Points

Yeah sorry my bad - I'm lacking sleep today, have a look at this Codepen using your html and css - I played around with the padding values in your #wrapper selector. It seemed to be starting inline with the first image as you had set the padding top and bottom to 0. Hope this helps.

Daisy Lloyd
Daisy Lloyd
1,472 Points

Ha - no worries Sam :-)

That is super useful - thank you!!! That makes sense now :-)

Sam Baines
Sam Baines
4,315 Points

No worries, glad I could help eventually - give me a shout if you need any more css help.

Daisy Lloyd
Daisy Lloyd
1,472 Points

Thanks for taking the time and that is great to know I can call for help again :-)

You can use something like http://www.codeshare.io/ to share code. I dunno if treehouse has anything like this, I just started here yesterday.

Daisy Lloyd
Daisy Lloyd
1,472 Points

Thanks Joel, I watched the video 'tips for asking questions' this showed me how to paste code - have pasted it as a comment to my question. Let me know if you can spot what I'm doing wrong.

We are going to need your full code, both HTML and CSS in different blocks to see what the real problem is, because your CSS snippet that you posted is fine. Use that codeshare.io link, because that is pretty nifty.

http://codepen.io/ is better when you need to show multiple files :)