Build a House Painting - Build a House Painting

Curriculum Help
,
1

Tell us what’s happening:

I’m doing Lab at Position: Build a House Painting. and I passed every test except instruction 44. that says Your #chimney should have a top value that puts it at the top of your #house. and I did as I instructed. But It keep failing. Can you please find solution it for me Because I can’t move on without passing the lab. Thank you

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>House Painting</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="house">
        <div id="chimney"></div>
        <div id="roof"></div>
        <div id="window-1"><div></div></div>
        <div id="window-2"><div></div></div>
        <div id="door">
            <div class="key"></div>
        </div>

    </div>
</body>
</html>





/* file: styles.css */
#house {
  position: relative;
  top: 100px;
  left: 60px;
  right: 60px;
  z-index: 2;
  width: 500px;
  height: 400px;
  background-color: #f0ffff;
  border: 5px solid#00afcf;

}


#chimney {
  position: absolute;
  top: -75px;
  left: 350px;
  right: 50px;
  z-index: 0;
  width: 60px;
  height: 70px;
  border: 2px solid;
  background-color: #d0d0f0;

}

#roof {
  position: absolute;
  top: 0;
  bottom: 80%;
  left: 0;
  right: 0;
  width: 100%;
  height: 20px;
  border: 1px solid #00afcf;
  background-color: #999999;
}

#door {
  position: absolute;
  bottom: 0;
  left: 190px;
  right: 90px;
  width: 75px;
  height: 120px;
  border: 10px solid #00afcf;
  background-color: #999999;

}
.key {
  position: absolute;
  top: 60px;
  right: 0;
  border-radius: 25px;
  width: 20px;
  height: 20px;
  background-color: #00afcf;
}

#window-1 {
  position: absolute;
  top: 150px;
  left: 30px;
  width: 100px;
  height: 70px;
  border: 8px solid #00afcf;
  background-color: #999999;
}
#window-1 div {
  position: absolute;
  left: 45px;
  width: 3px;
  height: 70px;
  background-color: #00aa;
}

#window-2 {
  position: absolute;
  top: 150px;
  right: 30px;
  width: 100px;
  height: 70px;
  border: 8px solid #00afcf;
  background-color: #999999;
}
#window-2 div {
  position: absolute;
  left: 45px;
  width: 3px;
  height: 70px;
  background-color: #00aa;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Challenge Information:

Build a House Painting - Build a House Painting

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-house-painting/66d6a7a3e1aa411e94bf2346.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hey @atatatolia002,

I went through the lab file and found out that test is expecting top to be approximately equal to negative its own height. In your case, top should be around -70px, it’s accepting till -72, (As height is 70px).

3

Hi @atatatolia002,

The chimney is placed relative to the house, and the top of the house is 0, right? So, if the chimney height is 70px, what should top be to put the bottom of the chimney flush with the top of the house?

Happy coding

4

If we have the top at -75px, chimney doesn’t seem to overlap with the house but if we make it -70px, its overlapping the house. Any particular reason why? I believe test should allow us to go little bit above the height of chimney (in negative).

6 
Thanks for contribution. It's worked
7

The tests are looking for you to place the bottom of the chimney flush with the top of the house. And while it may not look flush visually, note that User Story #45 mentions that:

Your #chimney should have a z-index that puts it behind the house.

In this code, there is an unnecessary z-index property on the #house selector, and if the z-index on the #chimney selector is set to -1, the chimney will look good visually.