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

Watch Video

Posted April 8, 2015 2:39pm by

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?

April 8, 2015 2:44pm

a {
  text-decoration: none; 
}

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

April 8, 2015 2:46pm

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

code

April 8, 2015 2:50pm

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>

April 8, 2015 2:53pm

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

'''

April 8, 2015 2:57pm

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

April 8, 2015 4:03pm

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?

April 8, 2015 4:23pm

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

April 8, 2015 4:29pm

You're welcome.

I almost forgot about it myself. :)

3 Answers

April 8, 2015 4:07pm

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.

April 8, 2015 4:12pm

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.

April 9, 2015 12:35pm

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!

April 9, 2015 12:59pm

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?

April 9, 2015 1:19pm

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.

April 9, 2015 1:33pm

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.

April 9, 2015 1:35pm

Ha - no worries Sam :-)

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

April 9, 2015 1:40pm

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

April 9, 2015 1:43pm

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

April 8, 2015 2:44pm

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.

April 8, 2015 2:46pm

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.

April 8, 2015 2:48pm

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.

April 8, 2015 2:59pm

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

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Daisy Lloyd

Daisy Lloyd

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

Daisy Lloyd

Daisy Lloyd

Marcus Parsons

Marcus Parsons

Daisy Lloyd

Daisy Lloyd

Marcus Parsons

Marcus Parsons

Daisy Lloyd

Daisy Lloyd

Jason Anello

Jason Anello

Marcus Parsons

Marcus Parsons

Jason Anello

Jason Anello

3 Answers

Sam Baines

Sam Baines

Jason Anello

Jason Anello

Daisy Lloyd

Daisy Lloyd

Sam Baines

Sam Baines

Daisy Lloyd

Daisy Lloyd

Sam Baines

Sam Baines

Daisy Lloyd

Daisy Lloyd

Sam Baines

Sam Baines

Daisy Lloyd

Daisy Lloyd

Joel Swensen

Joel Swensen

Daisy Lloyd

Daisy Lloyd

Marcus Parsons

Marcus Parsons

Joel Swensen

Joel Swensen