HTML code editor showing false errors

HTML-CSS
21

The img caption div goes inside the img div.

This is the proper structure

<div id="img-div">
  <img id="image">
  <div id="img-caption">Some caption goes here</div>
</div>

I was able to look at your recent changes and there are a couple of errors that need fixing.

No.1
You can’t have two ids in the same opening tag

id= "img-div" id="Drake smiling"

Delete the drake is smiling id.

No.2
You will need to delete this because it should not be inside the img tag and the syntax is incorrect.

<div id="DrakeSmiling">

Please look at the example on proper structure I provided for you.

Hope that makes sense!

22

I get what you mean and I added it, but I just went from an 8/10 to a 6/10, I don’t know what I did wrong

23

ok its back to 8/10. Don’t know what happened to change that.

24

The issue is that you are adding this

<div id ="img-caption">Drake Smiling</div>

Inside the img tag.

You are basically doing this

<img <div id ="img-caption">Drake Smiling</div> >

But that’s not what I showed you earlier. :grinning:

I properly closed my img tag and then below the img tag I added that div.

Here is my correct example again.

Make sense?

25

Also proper code formating will help you alot.

When I format your code, you can see the issue a little bit better.

  <div id="img-div">
    <img src="https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5ed578988b3c370006234c35%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D43%26cropX2%3D1074%26cropY1%3D49%26cropY2%3D1080" class="drake-image thin-black-border" id="image" <div id="img-caption">Drake Smiling</div> alt= "drake's face">
  </div>
26

Yeah I think the format is what messed me up. I was wondering why mine was side by side while yours was on top of each other. Though I dont see the difference between what I’m typing and what you’re typing? I wrote this <div id ="img-caption">Drake Smiling</div> and you wrote <div id="img-caption">Some caption goes here</div> . and in your latest message the img caption goes directly after the id="image" and I did that also id="image" <div id ="img-caption">Drake Smiling</div>

27

You are placing this div
<div id ="img-caption">Drake Smiling</div>

inside the img tag.

I am not doing that.
That div does not go inside the img tag.

You are writing this

You are placing it inside the image tag.

I am writing this though.

<img THE DIV IS NOT IN HERE>
<div id ="img-caption">Drake Smiling</div>

You see the difference.

You can’t place a div inside an img tag.

28

Here is the correct formatting with your code.

  <div id="img-div">
    <img src="https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5ed578988b3c370006234c35%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D43%26cropX2%3D1074%26cropY1%3D49%26cropY2%3D1080" class="drake-image thin-black-border" id="image" alt="drake's face">
    <div id="img-caption">Drake Smiling</div>
  </div>
29

okay I get it now, I was confused because it made it look like it was inside the img tag. I fixed it now. 9/10.

1 Like
30

I have 9/10 on my project. https://codepen.io/GoodNGo/pen/eYvgwEr
not sure what else I have to add.

31

I’m only getting 8/10. Regardless, read the red error messages closely, they will tell you exactly what you need to fix. If you have a question about one of them then you can ask here.

Hint: You can fix the last two issues with fixes to the CSS for your image only. You do not need to mess with anything else.

1 Like
32

I have moved your post over to this topic since it concerns the same project.

This is not how you group classes together

class="center" class="responsive"

This is the correct way.

class="center responsive"

Hope that helps!

33

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