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>
     <div class="frame"><div class="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/114.0.0.0 Safari/537.36

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

Link to the challenge:

2

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

I want to know how to Wrap the .canvas element in another div . andGive that div the frame class.

4

to nest elements it would look like this

<div class="parent">
  <div class="child"> </div>
</div>

In this example, the child div is nested inside the parent div. This is pretty close to what you want but you will have to make the changes to pass the challenge.

5

this is how I do it but i dosent work

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

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

You have two opening divs here and only one closing div. You only need one div here not two

8

it seems that I lost ,I do all I can but it doesnt work.

9

This is the structure you want to use. The last code you sent was not correct, follow this and you need to replace the classes with the classes you need in the challenge. Post your new code se I can see

10

this ismy code

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

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

12

Does this look like the example I gave you?

13

it’s that I think I do but not work.

14

So this

Is the same as this?

You should only have two divs with one nested inside the other. Your current code has 3 divs

15

it works now,thank you

16

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