Learn the CSS Box Model by Building a Rothko Painting - Step 11

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

/* file: styles.css */
.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
}

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>

<!-- User Editable Region -->


    <div class="canvas">
      <div class="frame">,.canvas</div>
      
    </div>
    
  


<!-- User Editable Region -->

  </body>

Your browser information:

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

Challenge: Learn the CSS Box Model by Building a Rothko Painting - Step 11

Link to the challenge:

2

Welcome to the forum!

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

ok so im on level 6 of step 11 and it says

" Every painting needs a frame.

Wrap the .canvas element in another div. Give that div the frame class."

and when I put

It says "Your `.canvas` element should be nested in the new `div` element."

I am really confuse and cant pass this step please help me.

4

Learn the CSS Box Model by Building a Rothko Painting
step 11

5

Thanks for that Ravijaiswal0253,

I see you added “.canvas” as text. This challenge actually does not require you to add any text, but you need to add another div with the frame class. So, I suggest resetting the lesson to fix everything. When you reset the challenge you will see this

 <div class="canvas">
    </div>

Now, the challenge asks you to " Wrap the .canvas element in another div . Give that div the frame class"

What this means is you need to add another div around the existing div that the challenge initially gave you, and give that new div the class of “frame”

Are you familiar on how to nest elements?

6

no i tried my best but couldn’t pass this one

7 
<div class="canvas">
      <div class="frame"></div>
    </div>

Mod Edit. I have edited your code so it can be shown

8

No worries, so we dont give out full solutions to the challenges but I can help you work this out. When you nest something all your doing is putting and element inside another element. That looks like this

<div>
   <div> This div is inside a div </div>
</div>

Notice how when I nest an element I have the opening div at the very top, and the closing is on the very bottom? Anything between those two tags is considered to be nested.

Now with that being said, you need to nest the initial div that the challenge gives you, inside a new one and then make sure you give the new a div the class frame

9

this is what I understand from the command.

10

its not working for me.
when i type




It says “Your .canvas element should be nested in the new div element.”

11

You are close! I edited your post to show the code. You just need to switch the classes around. the top div should have the frame class, and the lower div needs the canvas class

12

Once you switch the classes around the challenge should pass

13

ok
wow finally i pass. thanks for your help Cody.

1 Like
14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.