Learn CSS Colors by Building a Set of Colored Markers - Step 14

HTML-CSS
#1

** Step 14
Now that you’ve got one marker centered with color, it’s time to add the other markers.
In the container div, add two more div elements and give them each a class of marker.**




Challenge: Learn CSS Colors by Building a Set of Colored Markers - Step 14

Link to the challenge:

#2 
<div class="container">
      <div class="marker">
      </div>
    </div>
#3

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 (').

#4

You haven’t followed the instruction properly. You need to add more div elements as requested.

#5 
<div class="container">
      <div class="marker">
        <div class="marker">
          <div class="marker">
            </div>
            </div>
      </div>
    </div>

I tried this but it’s saying " Your new div elements should be within the div with the class `container’ "

thank you for your time

1 Like
#6

Right. So what you have created is a div inside a div inside another div (a series of nested divs)

But they want all the divs to be “siblings”. They should be next to each other, not enclosing one another.

#7 
<div class="container"> <div class="marker"> <div class="marker"> <div class="marker">    </div>  </div>  </div>  </div>

<div class="container"> <div class="marker" class="marker" class="marker">    </div>  </div>

I tried both of these

#8

The first one creates a div inside a div inside a div (nested divs). They don’t want nested divs. They want divs next to each other. Not inside one another.

The second one is invalid html and will never be correct.

Here is an example of nested elements vs an example of elements that are next to one another:

<body>
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

<body>
  <p></p>
  <p></p>
  <p></p>
</body>

First block everything is nested.
Second block, the paragraphs are not nested.

#9 
<div>
      <div class="container">
      <div class="marker">
        </div>
        <div>
        <div class="container">
          <div class="marker"> 
            </div>
            <div>
              <div class="container">
                <div class="marker">
                  </div>

This is closer I think. The script has generated 3 markers. However it says " Your second new div element should have a closing tag."

1 Like
#10

you are not supposed to be duplicating the container div.
Only the marker div should be duplicated so that you have 3 in total.

#11 
<div>
      <div class="container"> 
      <div class="marker"> </div>
        </div>
        <div>
          <div class="marker"> </div>
            </div>
            <div>
                <div class="marker"> </div>
                  </div>
                  </div>

I tried this but it says " Your new div elements should be within the div with the class container "
Thank you for all your help

1 Like
#12

There is too much code now unfortunately.

If you restart this step you are presented with this block of code

<div class="container">
      <div class="marker">
      </div>
</div>

This code shows one div .container and it has inside it a div .marker (made up of one opening tag and one closing tag as usual)

They want you to create more .markers which means that the two lines that make up the marker are to be copied and repeated two times

     <div class="marker">
      </div>

The mistake you were doing before is that you were duplicating the tags separately which changed the design of the code.

What you want to do is duplicate the whole element. That means if you are using a mouse, you would select the two lines that make up the marker and copy them in a new line beneath the existing one.

The end result will be that you create this type of design

<div class="container">
    Opening tag
    Closing tag
    Opening tag
    Closing tag
    Opening tag
    Closing tag
</div>

Do NOT do this:

<div class="container">
    Opening tag
    Opening tag
    Opening tag
    Closing tag
    Closing tag
    Closing tag
</div>

As this is nested tag design. (You did that earlier if you recall and I told you it was wrong so I am just warning you not to go back to this)

6 Likes
Learn CSS Colors by Building a Set of Colored Markers - Step 14
#13

Thank you so much for this explanation. Now I get it… It was driving me crazy!

2 Likes
#14

Thank you! Your expo is very straightforward.

1 Like
#15

(post deleted by author)

#16

Great Explaination !

1 Like