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
shareyourpeace
3,244 PointsMy browser output does not show the 'box'. I am at the very beginning of the video.
I am following the video exactly.
The html has a
<div class="box"></div>
The css has
.box {
Background-color:blue;
}
No browser output at all.
I tested by adding into the html
<h1> hi </h1>
And into the css
h1 {
color:red;
Font-style:italic;
I get a red italic 'hi' in the output.
I used the below questions and added 'this is a test' into the Div with class = box.
I see the blue div with the text.
But in the video, the screen show a large white border rectangle box. Then the entire screen turns blue when Guil changes the background-color to blue.
Can some explain this please. Thanks.
5 Answers
Shawn Jones
15,579 PointsYour box doesn't have a defined height. so unless your box has content inside of it, the box has collapsed.
This will show your box
<div class="box"><h1>hi</h1></div>
This will not
<div class="box"></div>
if you don't want to add content inside the box, you can give it a defined width and height in css and it will display the box.
so if you stated this in your code...
<div class="box"></div>
you can state this in your css and it should show the box in the broswer:
.box{
width: 100px;
height: 100px;
background-color: blue;
}
hope that helps.
Sean T. Unwin
28,690 PointsDon't use capitals in your CSS attributes.
For example, use: background-color: blue
shareyourpeace
3,244 PointsThanks for editing.
shareyourpeace
3,244 PointsYes. Thanks. I had figured that out. Your reply showed up with a 42 minute lag on my end.
Shawn Jones
15,579 PointsGlad I could help.
shareyourpeace
3,244 PointsI have tried posting the following question 4x. I get a red error message saying I need to include at least one letter or number.
So I am just attaching the question to this post. Thanks for looking.
At point 10:50 in the video, Guil is demonstrating the background-attachment property. He is in style.css The background-image is mike.png
His browser output is the rain.jpg.
What happened ? What was skipped.
Thanks
Shawn Jones
15,579 PointsCould you post the link to the video in this comment area. I dont have a link to get to what your talking about.
shareyourpeace
3,244 PointsThanks again Shawn http://teamtreehouse.com/library/css-foundations/backgrounds-and-borders/background-properties-3
It is in Frontend Web Development, backgrounds, the first video at time 10:50.
Shawn Jones
15,579 PointsOkay. Finally see what your talking about. Basically he did skip a step and didn't add the image to the back because he wanted to focus on background attachment and the effects. So due to editing you don't see when he added the background image to the class, probably because he did that first to setup the lesson and then started working on .box second. Doesn't make sense to do the same thing twice when he already taught how to include a background image in css first. So it's cut out for repetition sake. Rules still apply, if you want the image to show up in the background in css, you have to include it as such:
.box{
background-image:url("path-to image/image_name_here.jpg"); }
From there you can add and do the different background properties he was talking about.
Hope that helps.
Sean T. Unwin
28,690 PointsSean T. Unwin
28,690 PointsHi shareyourpeace,
I have edited your post to format the code for readability. Please read the 'Markdown Cheatsheet` at the bottom of the post comment text area or refer to this thread.