Tribute Page - Build a Tribute Page

showing this type of errors.

  • Your img element should have a display of block.

Failed: Your #image should have a max-width of 100%.

our #image should be centered within its parent.

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

yes those are the errors im getting and the page seems to be ok

Please can you provide a link to your code as well as the demo of the webpage.
Thanks.

html

<div id="main">
    <header>
      <div id="title">
        <h1>Khalil Gibran</h1>
        <p>A man of mystical Arabic and English works</p>
      </div>
      <figure id="img-div">
        <img src="https://thehelpfultipper.github.io/tribute_page_fcc/khalil-gibran-youth.jpeg" alt="Photograph of Khalil Gibran During his youth." id="image" display="block">
        <figcaption id="img-caption">Photograph of Khalil Gibran During his youth. Source <a href="https://www.poetryfoundation.org/poets/kahlil-gibran">Poetry Foundation</a>.</figcaption>
      </figure>
    </header>
    <main id="main">
    <main id="tribute-info">
      <h3>Here's a time line of Khalil Gibran's life:</h3>
      <ul>
        <li><strong>1883</strong> - Gibran is born in Besharri, a town in what is now northern Lebanon that is surrounded by the famed "Cedars of Lebanon".</li>
        <li><strong>1895</strong> - After his father is imprisoned in Besharri for corruption,Gibran's mother and her four children emigrate to Boston in hopes of escaping misery. Kahlil shows talent at drawing and, at age 12, begins to learn English.</li>
        <li><strong>1897</strong> - Moved by a desire to complete his Arabic-language education, Gibran returns to Lebanon and attends al-Hikmah high school in Beirut, where he pursues a reformist Arabic curriculum. He also studies religion and ethics.</li>
        <li><strong>1902</strong> - Gibran returns to Boston, now aged 19. Develops a friendship, then romantic feelings for a young Bostonian woman, Josephine Peabody, a poet and intellectual. In the same year, he loses to tuberculosis his sister Sultana, his half-brother Peter, and his mother Kamila.</li>
        <li><strong>1904</strong> - Meets Mary Haskell, an American school headmistress in Boston who supported promising young orphans. Marks the beginning of a lifelong friendship that sometimes veered toward romance. It is owing to Mary that he will be able to devote himself to his painting.</li>
        <li><strong>1908</strong> - At 25 years of age, Gibran begins his two-year stay in Paris, paid for by Mary Haskell, where he studies painting and is influenced by the reigning school of Symbolism.</li>
        <li><strong>1916</strong> - At age 33, Gibran's feelings of nationalism and resentment of Ottoman rule grow, as famine ravages the Levant. He becomes active in raising relief funds in the U.S. for the starving.</li>
        <li><strong>1923</strong> - Appearance of The Prophet. Its lyricism and simple style make it an immediate and considerable success. Continues correspondence with May Ziadeh of Cairo. Mary Haskell moves to Savannah Georgia and goes out of Gibran's life.</li>
        <li><strong>1931</strong> - Gibran dies in a New York hospital. The New York Sun announces in its obituary, "A Prophet is Dead." His body is shipped back to Lebanon, and an immense procession follows his coffin from Beirut to Besharri.</li>
      </ul>
      
      <figure>
        <p><em>"The English have Shakespeare, the rest of the world has Gibran."</em></p>
        <figcaption><em>-- me, myself, and I</em></figcaption>
      </figure>
      <p class="disclaimer"><small>*Timeline details courtesy of <a href="https://www.timetoast.com/timelines/gibran-khalil-gibran">mahaz</a></small>.</p>
    </main>
    
    <footer>
      <h3>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Kahlil_Gibran" id="tribute-link" target="_blank">Wikipedia entry</a>.</h3>
    </footer>
  </div>

css

#main {
  background-color: #EEEEEE;
  margin: 30px 0;
  font-family: sans-serif; 
  font-weight: 300;
  text-align: center;
  box-sizing: border-box;
}

#title {
  font-size: 150%;
  padding-top: 50px;
}

#img-div {
  background-color: white;
  margin: 40px 20px;
  padding: 20px 10px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  max-width: 100%;
  height: auto;
}

#tribute-info {
  width: 60%;
  margin: 0 auto;
}

@media (max-width: 750px) {
  #tribute-info {
    width: 90%;
  }
}

#tribute-info :not(h3) {
  text-align: left;
  line-height: 1.5rem;
}

h3, ul {
  margin-bottom: 40px;
}

ul li {
  margin: 15px 0;
}

ul li strong {
  font-weight: 600;
}

.disclaimer {
  margin-top: 30px;
}

footer {
  padding: 5px;
  line-height: 1.5rem;
}

The code you provided has no img element. I mean the “img” tag

can u help by typing the code for me

Hmmm​:thinking::thinking: I don’t like providing direct answer to a project or task, but I prefer guiding one to discover the solution to the challenge by themselves.
I will drop some screenshots of the “instruction and tests” where I think you should focus on.
Please kindly exercise patience.

surely dont provide the direct soln just guide me

1 Like


From the error you are getting, I think you need to satisfy the requirements in the screenshots.

Kindly check if you have img element in your HTML and make sure it’s a descendant of #img-div.

Again, ensure that #image is selected in your CSS and given a max-width value of 100%

From what I can see in CSS code you provided

You are giving “img” max-width property that supposed to be given to “#image” id selector. Also, you have given “img” margin-left and mergin-right of auto, but that supposed to given to “#image” id selector as well.

In summary, you getting these errors because you attributed the CSS properties and their respective value to the wrong selector “img”, which is a type selector, but the “instruction and test” want you to do that to the “#image”, which is an ID selector.

So, in terms of display, the page will display correctly, but it will not pass the test. The setback of your current styling is that if you add another img element in the page, (which you might want to align left, right, top or bottom) it will inherit this styling thereby preventing it to align the way you want.

If the error persists, hit the reply button.
I will be happy to help.
Happy Coding…

all other error got fixed but image error still showing.

center your “#image” using this code of yours below:

It seems you forgot to put it in the #image after you removed it from img
I think that should solve all other errors.

Since you said you are having the same errors, you can update your codes according to my guide.

Kindly close those extra spaces within the code blocks.

Again, if you can put your codes where it’s accessible to public it will make your life and mine easier.
Kindly push the code to GitHub or codepen platform and send me the link to the code source.

I am suspecting something is wrong with your HTML code.

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.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').


Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

I do not see a link to the CSS and you are missing all the boilerplate in the HTML you posted. (doctype, head, html, body)

1 Like
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tribute page</title>
    <link rel="stylesheet" href="./index.css">
</head> -->
<body>
    <main id="main">
        <div class="moneybag">
            <h1 id="title">Dr. Norman Borlaug</h1>
            <p id="text1">The man who saved a billion lives</p>
            <section>
                <div id="img-div">
        <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists"/> 
                    <figcaption id="img-caption">Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
                </div>
            </section>
            <h2>Here's a time line of Dr. Borlaug's life:</h2>
            <section id="tribute-info">
                <ul>
                    <li>1914 - Born in Cresco, Iowa</li>
                    <li>1933 - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
                    <li>1935 - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li>
                    <li>1937 - Finishes university and takes a job in the US Forestry Service</li>
                    <li>1938 - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.</li>
                    <li>1941 - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.</li>
                    <li>1942 - Receives a Ph.D. in Genetics and Plant Pathology</li>
                    <li>1944 - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major climate on Earth.</li>
                    <li>1945 - Discovers a way to grown wheat twice each season, doubling wheat yields</li>
                    <li>1953 - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.</li>
                    <li>1962 - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population</li>
                    <li>1970 - receives the Nobel Peace Prize</li>
                    <li>1983 - helps seven African countries dramatically increase their maize and sorghum yields</li>
                    <li>1984 - becomes a distinguished professor at Texas A&M University</li>
                    <li>2005 - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."</li>
                    <li>2009 - dies at the age of 95.</li>
                </ul>
                <blockquote cite="">
                   <p> "Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress."</p>
                   <cite>-- Indian Prime Minister Manmohan Singh</cite>
                </blockquote>
            </section> 
            <h3 >If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Norman_Borlaug" id="tribute-link" target="_blank">Wikipedia entry.</a></h3>

        </div>
    </main>  
</body>
</html>
/**{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}*/
.moneybag{
    background-color: #eee;
    width: 100%;
    height: 100%;
    margin-top: 35px;
    border-radius: 5px;

}
#title{
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    padding-top: 60px;
}
main{
    cursor: pointer;
}
#text1{
    text-align: center;
    padding-top: 10px;
    font-size: 1.2rem;
    font-weight: 0;

}
#image{
    /* max-width: 1000px; */
    /* margin-left: 135px; */
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 100%;
    height: auto;
}
#img-div{
    height: 100%;
    width: 1300px;
    max-width: 100%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    /* margin-left: 15px; */
    display: flex;
    justify-content: centre;
    align-items: centre;
    flex-direction: column;
}
#img-caption{
    text-align: center;
    padding-top: 15px;
    font-size: 1.1rem;
}
h2{
    font-weight: bold;
    text-align: center;
    padding-top: 30px;

}

ul {
    font-size: 1.2rem;
    font-weight: 0;
}
ul > li{
   padding: 10px
}
#tribute-info{
    width: 500px;
    max-width: 300px;
    margin: 0 auto;
    padding-top: 5px;
    max-width: 100%;
}
 
    h3{    text-align: center;
} 

check the code i posted and help where the problem is at

Please @meshackjohn420 , if you have any issue with your code, kindly start a new topic with description of the issue you are facing. This is the community’s guideline.
Thanks for your understanding.
I hope to see your topic on the issue you are facing soon.

1 Like

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