Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

I am trying to put the chimney on top of the house. I c’ant solve it.

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 */
#house {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: #f5deb3;
  border: 4px solid #333;
  margin: 50px auto;
}

#house > div {
  position: absolute;
  border: 2px solid #222;
}

#roof {
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #8b0000;
  border: black;
}

#chimney {
  position: absolute;
  top: -50px;
  left: 10px;
  width: 50px;
  height: 100px;
  background-color: #555;
  border: 2px solid black;
  z-index: -1;
}

#window-1,
#window-2 {
  width: 70px;
  height: 70px;
  background-color: #87ceeb;
  top: 120px; 
}

#window-1 {
  left: 80px;
  border: black;
}

#window-2 {
  right: 80px;
  border: black;
}

#door {
  width: 90px;
  height: 140px;
  background-color: #654321;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
border: black;  
}

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

2

Welcome back @imane1910,

If the positioning of the chimney is relative to the house and the top of the house is 0, what should the chimney’s top be to put the bottom of the chimney flush with the top of the house?

Happy coding!

1 Like
3

Thank you for your clear explanation, it really helped me understand the concept.

top: -chimney-height;