Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

I’ve positioned the chimney a little below the house so I can visually see how it stacks. Not sure what I am doing wrong with the z-index here, it’s still on top of the house for some reason.

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="styleseet" href="styles.css">
</head>
<body>
    <div id="sky"></div>
    <div id="grass"></div>
    <div id="house">
        <div id="chimney">
            <div id="brick"></div>
            <div id="brick"></div>
            <div id="brick"></div>
            <div id="brick"></div>
        </div>
        <div id="roof"></div>
        <div id="window-1">
            <div id="windowpane"></div>
        </div>
        <div id="window-2">
            <div id="windowpane"></div>
        </div>
        <div id="door">
            <div id="door-knob"></div>
        </div>
    </div>
    
</body>
</html>

/* file: styles.css */
#sky {
  width: 100vw;
  height: 600px;
  background-color: skyblue;
  position: fixed;
}

#grass {
  width: 100vw;
  height: 100vh;
  background-color: green;
  position: fixed;
  top: 600px;
}

#house {
  width: 500px;
  height: 400px;
  background-color: brown;
  border: maroon solid 5px;
  position: relative;
  z-index: 2;
  top: 300px;
  left: 450px;
}

#chimney {
  width: 100px;
  height: 150px;
  background-color: brown;
  border: maroon solid 5px;
  position: absolute;
  z-index: 1;
  top: -155px;
  left: 330px;
}

#brick {
  width: 100px;
  height: 26px;
  border-bottom: maroon solid 5px;
}

#roof {
  width: 494px;
  height: 130px;
  background-color: chocolate;
  position: absolute;
  top: 0px;
  border: dashed goldenrod 2px;
}

#window-1 {
  width: 100px;
  height: 80px;
  background-color: cornsilk;
  border: goldenrod solid 3px;
  position: absolute;
  top: 170px;
  left: 25px;
}

#window-2 {
  width: 100px;
  height: 80px;
  background-color: cornsilk;
  border: goldenrod solid 3px;
  position: absolute;
  top: 170px;
  right: 25px;
}

#windowpane {
  width: 50px;
  height: 80px;
  border-right: goldenrod solid 3px;
}

#door {
  width: 120px;
  height: 200px;
  background-color: indianred;
  border: maroon solid 3px;
  position: absolute;
  left: 190px;
  bottom: 0px;
}

#door-knob {
  width: 15px;
  height: 15px;
  background-color: maroon;
  border-radius: 25px;
  position: absolute;
  right: 5px;
  bottom: 80px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15

Challenge Information:

Build a House Painting - Build a House Painting

2

z-index is a weird property i think.
It works as you would expect if the elements are not descendants (like for 2 siblings that overlap for example) but does something else when the descendants have a different z-index than the parent.

With css, I always try for ‘less is more approach’. So I tried to remove your z-index definition on the #chimney. That did the trick for me.

more on this here https://stackoverflow.com/questions/54897916/why-cant-an-element-with-a-z-index-value-cover-its-child

1 Like
3

the z-index is not important to pass the test, you need to have the bottom border of the chimney be where the top border of the house is

4

Ah, even though test 41 says that I’m supposed to have a z-index with the chimney?

5

if that test says so, then you need it… (and perhaps you don’t need it somewhere else)
I was responding initially to your comment about the z-index not working only.

6

Ah, I should have specify the two tests I didn’t pass - 40. Your

#chimney

should have a

top

value that puts it at the top of your

#house

. 41. Your

#chimney

should have a

z-index

that puts it behind the house.

7

have you looked into the suggestion made by @ILM ?

8

Yes - I also read the stack overflow thread you linked. I was able to bring the chimney behind the house now. With this new CSS for chimney, but neither tests pass still.

#chimney {
width: 100px;
height: 150px;
background-color: brown;
border: maroon solid 5px;
position: absolute;
top: -165px;
left: 330px;
z-index: 0;
}

9

OK, the z-index issue is not solved for me. Thank you. I changed the above value.

10

I updated the top to -165px, and it looks like the border of chimney is right against the border of the house. Is that what you meant? Somehow that still doesn’t pass.

11

try -150px
(that’s the current size of the content area of your chimney)

12

Thank you - that did work. I must have not understood the question correctly. Is that the number when discounting both the borders of the house and the chimney?

13

yes, that’s the number you have in your height

1 Like