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 trialDaisy Lloyd
1,472 PointsOrange 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?
Marcus Parsons
15,719 PointsHey Daisy, you can paste your code like so which will drastically help to answer Q1 as well as Q2 :P
Daisy Lloyd
1,472 Pointshere'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>© 2015 Daisy Ann Lloyd.</p>
</footer>
</div>
</body>
</html>
Marcus Parsons
15,719 PointsDaisy, 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
1,472 PointsOops 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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?
Marcus Parsons
15,719 PointsI need to remember that we now have snapshots and to encourage that. Thanks, Jason!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome.
I almost forgot about it myself. :)
3 Answers
Sam Baines
4,315 PointsHi 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.
Jason Anello
Courses Plus Student 94,610 PointsHi 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
1,472 PointsHi, 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
4,315 PointsThanks 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
1,472 PointsI 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
4,315 PointsYeah 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
1,472 PointsHa - no worries Sam :-)
That is super useful - thank you!!! That makes sense now :-)
Sam Baines
4,315 PointsNo worries, glad I could help eventually - give me a shout if you need any more css help.
Daisy Lloyd
1,472 PointsThanks for taking the time and that is great to know I can call for help again :-)
Joel Swensen
4,503 PointsYou 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
1,472 PointsThanks 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.
Marcus Parsons
15,719 PointsWe 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.
Joel Swensen
4,503 Pointshttp://codepen.io/ is better when you need to show multiple files :)
Daisy Lloyd
1,472 PointsDaisy Lloyd
1,472 Points