Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

Hi, I’m having an issue with Test 44. The chimney looks correct visually when I use a negative top value, but the test fails. If I set top: 0, it’s hidden behind the roof. How can I make the chimney pass the test and still appear at the top?the chimney gets hidden behind the roof, and it’s not visually correct. I’ve tried adjusting the z-index and roof layering, but I’

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</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 Container */
#house {
    position: relative;
    width: 500px;
    height: 400px;
    background-color: #ffd699;  /* light house color */
    border: 4px solid #333;     /* visible border */
    z-index: 1;                  /* ensures chimney is behind the house */
}

/* Chimney */
#chimney {
    position: absolute;
    width: 60px;
    height: 100px;
    background-color: #a52a2a;  /* brown */
    border: 2px solid #000;
    top: -50px;        /* push chimney above roof to appear at top */
    left: 370px;       /* inside house */
    z-index: 0;        /* behind house */
}

/* Roof */
#roof {
    position: absolute;
    top: 0;
    width: 500px;
    height: 100px;
    background-color: #ff4d4d;  /* red roof */
    border: 2px solid #000;
    clip-path: polygon(0 100%, 50% 0%, 100% 100%); /* triangle roof */
    z-index: 2;        /* above chimney */
}

/* Door */
#door {
    position: absolute;
    width: 80px;
    height: 150px;
    background-color: #654321; /* dark brown */
    border: 2px solid #000;
    bottom: 0;
    left: 210px;               /* centered in house */
}

/* Windows */
#window-1, #window-2 {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #87ceeb; /* sky blue */
    border: 2px solid #000;
    top: 120px;                /* below roof */
}

#window-1 {
    left: 80px;
}

#window-2 {
    right: 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/26.2 Safari/605.1.15

Challenge Information:

Build a House Painting - Build a House Painting

2

Hi @kavanah06

The roof is positioned below the height of the house.

Happy coding

3

I updated the house layout according to your suggestion.

  • The roof is now positioned at the top of the house, using a triangle shape with clip-path for visual correctness.

  • The chimney is positioned above the roof so it appears properly sticking out.

  • The windows and door are aligned correctly within the house borders.

The layout looks correct in the browser. However, FCC test #44 still fails, stating:
“Your #chimney should have a top value that puts it at the top of your #house.”

This happens because I used a negative top value for the chimney to position it visually above the roof. The test checks only for a literal top: 0 value in the CSS, so even though the chimney appears correct visually, the test fails.

4

no, it checks for a top that has the same magnitude of the height property, if you use height: 100px it expects the same (but negative) for top