Tribute Page - Build a Tribute Page

Tell us what’s happening:

Describe your issue in detail here.
After running tests I am left with this message and I cannot figure it out - “Your #image should be centered within its parent.”

Curious also - I do not have a real image url as it did not seem to actually be a part of what I was being tested on at this stage. Am I mistaken in this assumption? Does that have anything to do with me getting the failed test message I receive?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, scale=1.0" />
    <title id="title">Jesus Christ - Jehovah's Guarantee</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <main id="main">
      <div id="img-div">
        <img id="image" href="https://www.jw.org">
        </img>
        <tribute-link>
        </tribute-link>
        <p id="tribute-info">2 Cor. 1:20 - "For no matter how many the promises of God are, they have become "yes" by means of him. Therefore, also through him is the "Amen" said to God, which brings him glory through us.
        </p>
        <figcaption id="img-caption">The payment of the ransom by the Lord Jesus Christ
        </figcaption>
        <a id="tribute-link" target="_blank" href="https://www.jw.org">
        </a>
      </div>
    </main>
  </body>
</html>
/* file: styles.css */
img {
  display: block;
  /*align-items: center;*/
  /*text-align: center;*/
  /*justify-content: center;*/
}

#image {
  max-width: 100%;
  /*width: 100%;*/
  height: auto;
  /*display: flex;*/
  /*align-items: center;*/
  /*text-align: center;*/
  /*justify-content: center;*/
}

/*.div > #image {
  align-items: center;
}*/

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Safari/605.1.15

Challenge Information:

Tribute Page - Build a Tribute Page

You appear to have created this post without editing the template. Please edit your post to 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!

Welcome back to the forum @Billb

As far as I know, the tests do not check the link or images, just that the code is correctly structured.

Most of your styling properties are commented out.
If you decide to restore the styling code, the image centering issue will disappear.

There will be one issue left to solve.

Happy coding

The reason all those properties are commented out is because I Had tried them and they did not work. I did want to keep a list of what I had tried, so I kept them there and commented them out

I realized from the first certification project that the way I did that one made it way more complicated than was necessary because there were limitations on what I was being tested for. So I have written the HTML elements in the order and the structure recommended by the instructions and not making the image an actually functioning one.

As I worked through the testing of my code, as errors were listed, I would corrected them, going through the previous lesson especially to do so. I was able to correct them one by one, but have been unable to correct this last one . I know it is a CSS error. I have gone back through every step of the previous lesson looking for information related to the error. In my CSS that has been commented out you can see the various things I have tried, and also commented out and left there because I was continually repeating some of the same unsuccessful efforts.

I bought this massive book by Juergen Wolf to try to figure it out, I have asked repeated questions online looking for help, and even have a reference from FreeCodeCamp that offered suggestions but nothing has helped and I do not understand what will resolve it.

Hopefully my commented out helps also to explain my thought and direction i was going to correct and complete the challenge.

I apologize for not responding sooner. I had expected a regular email regarding this rather than an in-house posting in this forum. Thanks for responding. BB

But I see that especially in the #image I also commented out things in such a way that the code is incomplete, so I will go back to that and see if I can fix that. Then get back to you.

So I tried a bunch of other CSS properties that are now added to my list of commented out values and still haven’t a clue why I clear the final error. HELP please

Lastly, after correcting my code to where I am left with the one last error message, everything that is seen in my CSS file that is commented out is something that I tried in resolving the last error message. I left them commented out so I, nad now you or anyone else who may try to help me, can see what I have done.

I will see if I can write an HTML line of code that will allow me to center my #image in its parent container. But it seems the exercise was to get me to have CSS coding that affected the HTML coding to accomplish these things.

Somebody please help, hint or direct me to a step in one of the previous lessons that has information that addresses this question. It would be greatly appreciated. BB

/Below is my latest list of efforts. Again, what has been commented out are various lines of code that I tried but that did not eliminate the last error I have left/

img {
display: block;
}
/* I tried these at different times in “img”
align-items: center;
text-align: center;
justify-content: center;*/

#image {
max-width: 100%;
height: auto;
}

/div > img {
align-content: center;
}
/
/* I aslo tried with div > img
justify-content: center;

/* I tried these at different times in “#image
width:100%;
display: flex;
align-items: center;
text-align: center;
justify-content: center;*/

/* I tried this trying to get the parent

involved*/
/.img-div > .image {
justify-content: center;
}
/

/I tried this also in .img-div > #image
align-items: center;
/

/div > #image {
align-items: center;
}
/
/I tried this also in div > #image
justify-content: center;
/

I finally figured it out! YAY!

2 Likes

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