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
Jonathan Grieve
Treehouse Moderator 91,253 PointsFinally, give the .secondary-content element a solid, lightgrey bottom border that's 2px wide.
Is this a bug or am I missing something completely obvious.
I need to add a bottom border to an element with the class .secondary-content. That's what the question is asking for, yes?
Then you'd think I'd have to answer with
border-bottom-style: solid lightgrey 2px;
Yes? Because it to me, the challenge wants a specific border on the bottom of the element.
But it didn't work. As a last resort, I added this to the element.
border: solid lightgrey 2px;
It passed. But this surely will add the styles to all 4 sides of the element.
I be confused. :)
/* Complete the challenge by writing CSS below */
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
.wildlife {
border: solid orange 10px;
margin-top: 105px;
}
.secondary-content{
padding-top: 80px;
padding-bottom: 70px;
border: solid lightgrey 2px;
}
<!DOCTYPE html>
<html>
<head>
<title>Lake Tahoe</title>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="primary-content t-border">
<p class="intro">
Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#more">Find out more</a>
<div class="wildlife">
<h2>Check out all the Wildlife</h2>
<p>
As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
</p>
</div>
<a href="#wildlife">See the Wildlife</a>
</div><!-- End .primary-content -->
<div class="secondary-content t-border">
<div>
<h3>From Tents to Resorts</h3>
<p>
Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
</p>
<ul>
<li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
<li><a href="#resorts">South Lake Tahoe Resorts</a></li>
<li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
</ul>
</div>
<div>
<h3>Pack Accordingly</h3>
<p>
One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
</p>
<ol>
<li>Bring layers of clothing</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</ol>
</div>
</div><!-- End .secondary-content -->
<footer class="main-footer">
<p>All rights reserved to the state of <a href="#">California</a>.</p>
<a href="#top">Back to top »</a>
</footer>
</body>
</html>
4 Answers
Christoph Paterok
7,676 PointsI think it's just like the "border"-property. But you have to rename it to "border-bottom". ;-)
Kevin Hahn
3,951 PointsI was able to pass the code challenge with this response, but I'm not sure why the previous step accepted div .wildlife without a comma.
/* Complete the challenge by writing CSS below */ .primary-content { padding: 25px 0 95px; }
div .wildlife { border-top: 10px solid orange; }
div, .secondary-content { padding: 80px 0 70px; }
At first I specified the secondary-content class within the div tag as "div .secondary-content" (like "div .wildlife" in the previous step), but only upon adding a comma between div and .secondary-content did I pass the code challenge. Does that comma actually matter?
Erin Waldie
Courses Plus Student 4,419 PointsHelpful answer for div.wildlife portion. Thanks. The explanation was clear.
Jonathan Grieve
Treehouse Moderator 91,253 PointsI still don't know why border would work as it's not specific enough even though by consequence it does style the bottom.
I'm pretty sure border-bottom-style would work too. :)
Jason Anello
Courses Plus Student 94,610 PointsHi Jonathan,
The challenge is probably being a little too loose in letting border pass because it does style all the borders as you've mentioned. The same thing happened for the wildlife div. I think it only wanted the top border on that one.
Re: border-bottom-style
This is an individual or longhand property which only lets you set the style, i.e. solid, dashed, dotted... You can't set the color and width using that property.
You could use all 3 longhand properties to solve the challenge:
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: lightgrey;
Or use the shorthand border-bottom property to do it all on one line:
border-bottom: 2px solid lightgrey;
Jonathan Grieve
Treehouse Moderator 91,253 PointsAh yes, this is I got through the 4 preceding tasks by specifying the individual rules before it.
And it's only now just occured to me that border-bottom-style only refers to that range in the styling. I should have picked up on that :)
But border-bottom seems like the obvious solution in any case,
Gavin Mace
30,747 PointsJust did this one.
It's a little annoying when you submit the correct answer, but then need to Google the question to find out which variation of the correct answer will give you the green tick.
Jason Anello
Courses Plus Student 94,610 PointsHi Gavin,
What did you feel was correct but didn't pass the challenge?