Tribute Page Project (Help me out)

HTML-CSS
1

Pls can someone tell me the problem with my code.

https://codepen.io/ayeolakenny/pen/zXbagY

ill be glad if someone answers, thanks…

2 Likes
2

When you run your tests, you should see some output indicating what’s wrong.

For example, you have a failure on “3. I should see a <div> element with corresponding id="img-div".” and the beginning of the error states, “expected null to not equal null”. Which means it expects to see a <div> with an id="img-div", but you do not have such a div! (You have something really, really close, but close doesn’t count here. :wink:)

Fixing #3 actually fixes one of your other errors. Which will leave only, “5. Within the "img-div" element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in "img-div".” which also reports, “expected null to not equal null”. That one’s a lot harder to figure out, and to be very honest, your code is correct semantically, but the test doesn’t agree. :frowning: Without giving it away, the test doesn’t like the “element” that you’re using, change the element to something more semantically generic and your test should pass.

Regarding your “error” on test 5. I definitely think your code is more correct semantically, and it should definitely pass! So, I’d also encourage you to report it as a bug either in the support channel here on the forum or as a proper issue in the GitHub repo. I was thinking of a different semantic element, see lasjorg’s comments below for better info!

p.s. For what it’s worth, you have a lot of duplication on your page. Just slowly scroll down the page to the very bottom, and you should see what I mean.

3

For #5 it is not testing the element, it is testing the id. The problem is you are using an invalid element (<caption>) and the text content is getting ejected. The <caption> element is a Table Caption element.

This is how the browser is rendering that part of the page. As you can see the image caption has no container.

<div id="image-div">
  <img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="">
  Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.
</div>

What you want is the figure and figcaption elements.

But the assertion text for the #img-div is misleading (BTW some of the projects have been updated on GitHub, but the Codepens has not been updated yet).

it(`I should see a <div> element with corresponding id="img-div".`,
function() {
  assert.isNotNull(document.getElementById('img-div'));
});
1 Like
4

Nice catch on the caption vs. figcaption - I totally spaced it on that one!

5

pls tell me the solution to #3, concerning the id=img-div, cause i think i already have that.:exploding_head:

and concerning the #5 im totally confused, donno what to do

6

the fixed nothing :persevere:

7

It is id="img-div" not id="image-div" and you are still using the invalid element.

<!-- not the correct id, should be img-div -->
<div id="image-div">
  <img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="">
  <!-- Invalid element in this context -->
  <caption id="img-caption">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</caption>
</div>

If you want to use a caption element here you need to switch to figure and figcaption

<figure id="img-div">
  <img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="">
  <figcaption id="img-caption">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
</figure>

For the last test, you can use this CSS.

#img-div {
  max-width: 980px;
  margin: 0 auto;
}
1 Like
8

problem solved, thanks alot bro. :grin:

1 Like