Build a House Painting - Build a House Painting

Programming HTML-CSS
1

Tell us what’s happening:

Task 40 for chimney positioning using top attribute is causingproblems in my code i don’t know why! This is driving me nuts

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

/* file: styles.css */
#house {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: #f4e2d8;
  border: 4px solid #333;
  margin: 50px auto;
}

#house > div {
  position: absolute;
  border: 2px solid #333;
  background-color: #c2dfff;
}

#chimney {
  width: 40px;
  height: 80px;
  top: 0;
  left: 60px;
  background-color: #a52a2a;
  z-index: -1;
  border: 1px;
}

#roof {
  width: 100%;
  height: 60px;
  top: 0;
  background-color: #8b0000;
border: 1px;}

#window-1, #window-2 {
  width: 60px;
  height: 60px;
  background-color: #add8e6;
border: 1px;}

#window-1 {
  top: 100px;
  left: 80px;
}

#window-2 {
  top: 100px;
  right: 80px;
}

#door {
  width: 80px;
  height: 120px;
  bottom: 0;
  left: 210px;
  border: 1px;
  background-color: #deb887;
}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting
https://www.freecodecamp.org/learn/full-stack-developer/lab-house-painting/build-a-house-painting

2

Try to use position: absolute or relative!
Without that, I think it will mess up your position! I think position should be assigned individually.
position: absolute;

3

the request is for the chimney to be above the house, for that you need to change the top value until the bottom border of the chimney matches the top border of the house

4

did not understand !

5

changed to absolute still error

6

isn’t your position already set to absolute here?

did you change the top value?

7

modified still error

#house {
position: relative;
width: 500px;
height: 400px;
background-color: #f4e2d8;
border: 4px solid #333;
margin: 50px auto;
}

#house > div {
position: absolute;
border: 2px solid #333;
background-color: #c2dfff;
}

#chimney {
position: absolute;
width: 40px;
height: 80px;
top: -85px;
left: 60px;
background-color: #a52a2a;
z-index: -1;
border: 1px;
}

8

try to make top and height the same, one positive the other negative

9

still did not pass
same top and height is resulting in chimney below roof

10

are you using a negative value for top?

11

tried both posi and negative

12

Your chimney is floating above your roof by 5 pixels.

It’s -85px from the top, but it’s only 80px high.

14

actually i had done every calculation possible i think coding off not numbers in my opinion

15

Set all borders to 0px so you can see where your chimney is. You can also give it z-index of 100 so it’s visible on top of everything. The bottom of the chimney needs to be touching the top of the roof.

16

thanks that helped me the best