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
orange sky
Front End Web Development Techdegree Student 4,945 PointsHow are the figures for button and <p> determine in the spoiler exercise?
Hello,
Would anyone happen to know why the appended button covers the paragraph perfectly well, without the sides of the paragraph showing.
At first I thought it was because the the figures of the margin of the button: margin:-40px -20px; match the padding of the paragraph padding:40px 20px; but when I changed the padding and the margin of each respectively to -50px -30px; I see that the sides paragraph sticks out.
<!DOCTYPE html>
<html>
<head>
<title>Star Wars Spoilers</title>
<style>
body{
background:#2f558e url(img/bg.png) repeat;
font-family:sans-serif;
}
img{
width:150px;
display:block;
margin: 100px auto;
}
button{
background: #dae1e4;
border:none;
width:480px;
padding:40px 0;
font-size:24px;
text-align:center;
border-radius:5px;
margin:-40px -20px;
}
.spoiler{
background: #1d3c6a;
width:440px;
padding:40px 20px;
margin:0 auto 20px;
font-size:24px;
text-align:center;
}
.spoiler span
{
color: #dae1e4;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".spoiler span").hide();
$(".spoiler").append("<button>Reveal</button>");
$("button").click(function(){
$(this).prev().show();
$(this).remove();
});
});
</script>
</head>
<body>
<img src="img/deathstar.png" />
<p class="spoiler">
<!--Spoiler:-->
<span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
</p>
<p class="spoiler">
<!--Spoiler:-->
<span>Luke and Leia are siblings. Ew.</span>
</p>
</body>
</html>
5 Answers
Matt Spiel
2,617 Pointsorange sky -- the paragraph is completely covered by the button because the button's margin values (-40px -20px) are the inverse of the paragraphs padding value (40px 20px).
So the answer your questions, as long as the paragraph's padding and the button's margins are inverse or opposite it will work:
.spoiler {
width:400px;
padding: 50px 30px; /* this is the value that must be inverted for the button */
margin: 0 auto 20px;
}
button {
width: 480px;
padding: 40px 0;
margin: -50px -30px; /* this is the inverted valuye of the spoiler's padding */
}
tihomirvelev
14,109 PointsHello,
It's actually not covering it. The paragraph is just not visible and it's display value is none the first time the page loads. So because it's not visible, you can't see that it's misaligned.
When you click the button, the button's display value goes to none and the paragraph's display value goes to inline.
Inspect the page with some of the DevTools on the browser you use and you will understand it better.
Hope that helps. :)
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello!
Ok, let's say our paragraph had the values below. What values would you put instead of all the questions marks, so that the paragraph is hidden and the button appears with no hedges showing at the bottom.
.spoiler{
width:400px;
padding:50px 30px;
margin:??
}
button{
width:??
padding:??
margin:??
}
Cheers!!
Andrew Chalkley
Treehouse Guest TeacherOur designer Matthew Spiel did the CSS for this project. He should be able to answer you.
Regards
Andrew
orange sky
Front End Web Development Techdegree Student 4,945 PointsThank you Andrew!