Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

I have tried everything possible, test 44 keeps on saying " Your #chimney should have a top value that puts it at the top of your #house" despite having a applied it and position it already on top of the house. Please look into this. Someone should please rectify this.

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 id="window-2"></div>
  <div id="door"></div>
</div>

</body>
</html>

/* file: styles.css */
body
{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#87ceeb;
}

#house{
  position:relative;
  width:500px;
  height:400px;
  background:#f4a261;
  border:3px solid #000;
}

#roof,
#chimney,
#window-1,
#window-2,
#door{
  position:absolute;
  border:2px solid #000;
}

#roof{
  width:100%;
  height:80px;
  top:0;
  background:#8b0000;
  border: 5px solid green;
}

#chimney{
  width:50px;
  height:120px;
  top:-80px;
  right:60px;
  background:#666;
  z-index:-1;
  border: 5px solid blue;
}

#window-1,
#window-2{
  width:70px;
  height:70px;
  top:130px;
  background:#cceeff;
}

#window-1{
  left:70px;
  border: 5px solid green;
}

#window-2{
  right:70px;
  border: 5px solid red;
}

#door{
  width:90px;
  height:130px;
  bottom:0;
  left:205px;
  background:#5c4033;
  border: 8px solid green;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.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

Hi @EJAY,

The issue is most likely coming from this line in #chimney:

z-index:-1;

With a negative z-index, the chimney is placed behind the house and the roof.
Test 44 probably checks whether the chimney is considered to be “on top” of the house, so it needs a higher stacking value.

3

Hi @EJAY,

Considering that all of the pieces of the house are relative to the house itself and the top of the house is at 0, what would the top of a chimney with a height of 120px need to be set at to put the bottom of the chimney flush with the top of the house?

Happy coding!