Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

  1. Your #chimney should have a top value that puts it at the top of your #house

I tried so hard but I’am unable to pass the test case of 40.
here is my css code:
#chimney {
position: absolute;
top: 0;
left:130px;
width: 500px;
height: 100px;
background-color: blue;
border: 2px solid black;
z-index: -1;
}
the error shows up after execution that the #chimney should have a top value that puts it behind the house.
Can anyone please help me to solve this issue?

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{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
#house {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: aqua;
  border: 5px solid black;
}

#chimney {
  position: absolute;
  top: 0;
  left:130px;
  width: 500px;
  height: 100px;
  background-color: blue;
  border: 2px solid black;
  z-index:-1;
}

#roof {
  position: absolute;
  top: 0;
  width: 500px;
  height: 100px;
  background-color: brown;
  border: 2px solid black;

}

#window-1 {
  position: absolute;
  top: 150px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 5px solid black;

}

#window-2 {
  position: absolute;
  top: 150px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 5px solid black;

}

#door {
  position: absolute;
  bottom: 0;
  left: 200px;
  right:200px;
  width: 100px;
  height: 150px;
  background-color: pink;
  border: 5px solid black;

}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

the chimney needs to be right above the house, you put it on the side

image
image681×521 897 Bytes

4

what values of top have you tried?

6

I see that right now it is 0, and it is not the right value, what other values did you try to put the chimney on top of the house?

7

i tried with values

top:-26px

right: 50px

height: 120px

width: 100px

8

that would make the chimney be a bit above the house and a bit inside the house, tho, what value could make it be all above the house?

10

It is not allowed to share the solution.

The chimney height is 100px, it needs to go all above the house, what top value could you try to move the whole of those 100px above the house?

12

if you use the right value of top, the one that make so that the bottom border of the chimney is where the top border of the house is, the test pass

that means that if your chimney is 100px high, you need to move it 100px upward

1 Like
13

You’re very welcome! Without your help, I would have been stuck on this problem. I finally passed the test case by setting the value of top to -100px.

2 Likes