Can someone make this in html for me please

HTML & CSS
82

Look at your code, and compare it to @ronpat’s code. Pay particular attention to the placement of each pair of <span> tags. The difference between the two will affect how they behave.

Of course, if you’d paid attention to what @PaulOB told you in another recent topic of yours, you’d have understood that there is a more semantic way to set this up:

However, as you seem hell-bent on doing things your way rather than the right way, studying the differences between your code and ronpat’s should enable you to fix your version.

83

I still don’t get it.

84

I’m looking at these 2 codes, I don’t understand what I’m supposed to change.
I’m not an expert at this.

<span class="blue"><span></span>Blue,</span>

<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin:0 2px 0 7px;"></span><span>blue,</span>
85

This is how @ronpat wrote his code:

<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#36B8F0; margin-right:2px;"></span>blue,</span>

This is how you have yours:

<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin:0 2px 0 7px;"></span><span>blue,</span>

Look again at how the <span> tags are arranged. (Hint: if you can’t spot the difference, remove all the inline styling and look again.)

1 Like
86

But isn’t his invalid?

</span>blue,</span>

Should be
</span><span>blue,</span>

87

This is how @ronpat wrote his code:

<span><span></span>blue,</span>

This is how you have yours:

<span></span><span>blue,</span>

That is so much clearer.
That is what is meant by:-

1 Like
88

No, but it is a different structure, so may behave differently.

1 Like
89

Blogger gave me this: Blogger says: Your HTML cannot be accepted: Closing tag has no matching opening tag: SPAN

90

No.

In Ron’s example, the <span></span> tags used to display the colour block are nested inside the pair of <span></span> tags with the colour name, thus keeping everything together, so when it wraps, it all wraps together.

<span><span></span>blue,</span>

In your code, the two pairs are separate, with nothing to connect them.

<span></span><span>blue,</span>

If you posted what you posted above:

then that error message is correct; you are missing a tag.

91

no, this is how I have mine set up.


</span><span>blue,</span>
92

This is confusing me even more.

93

Do you have an opening <span> tag before that first closing </span> tag?

If there are an odd number of span tags, then that is an error. There must be an even number of span tags. Every open span tag must have a closing span tag.

Post the code that you put into Blogger.

1 Like
94

There’s no error in this code. I just don’t know what I’m supposed to change in it.

<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin:0 2px 0 0px;"></span><span>blue,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#9BCD13; margin:0 2px 0 7px;"></span><span>green,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C40F89; margin:0 2px 0 7px;"></span><span>pink,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#818085; margin:0 2px 0 7px;"></span><span>grey</span>
95

That is your original inline HTML… the color box, then the color word… they wrap separately and are not associated with one another.

Your code could be written like this and be exactly the same as it is now.

<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin-right:2px;"></span>
<span>blue,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#9BCD13; margin:0 2px 0 7px;"></span>
<span>green,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C40F89; margin:0 2px 0 7px;"></span>
<span>pink,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#818085; margin:0 2px 0 7px;"></span>
<span>grey</span>
96

Look at the Green

97

That is your code. The color boxes and the color words are not associated with one another.

It’s the same as this.

<span>color box</span><span>color word</span><span>color box</span><span>color word</span><span>color box</span><span>color word</span><span>color box</span><span>color word</span>
98

Look at these

99

the boxes and the words “Don’t” stay attached

the boxes and the words stay attached

100

So which do you think is more desirable? Which of those did you ask for in the title of your “extra” post?

101

the boxes and the words stay attached