Tribute Page - Build a Tribute Page

My last two test are :slight_smile:

You should have an img element with an id of image .
and
Your #image should have a max-width of 100% .

I cannot see my mistake. Please help…

HTML---------

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>George Washington Carver</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<div class="header">
    <h1 id="title">George Washington Carver</h1>
    <h2>Agricultural Scientist, Innovator, Enviromentalist</h2>
    </div>
    <div id="image">
    <figure id="img-div">
    <img id="image" src="https://org-dcmp-staticassets.s3.us-east-1.amazonaws.com/posterimages/17247_1.jpg"></img>
    <figcaption id="img-caption">"There is no short cut to achievement. Life requires thorough preparation—veneer isn't worth anything."
    </figcaption>
    </figure>
</div>
<div id="tribute-info">
    <h3>Here is a short timeline of George Washington Carver's life.</h3>
    <ul>
        <li><span>1860-1864 ?</span> - Born into slavery, Diamond Grove Missori.</li>
        <li><span>1886</span> - Homesteaded a claim near Beeler, Kansas.</li>
        <li><span>1888</span> - Obtained a $300 loan for education from the Bank of Ness City.</li>
        <li><span>1890</span> - Studied Art and Piano at Simpson College in Indianola, Iowa</li>
        <li><span>1891</span> - Became the First black student at Iowa State University</li>
        <li><span>1894</span> - Recieved a B.A. in Agriculture</li>
        <li><span>1896</span> - Earned his Masters of Science in Bacterial Botnay and Agriculture and taught as the first black faculty member at Iowa State University</li>
        <li><span>1896</span> - Left Iowa State to head the Agriculture Department at the Tuskegee Institute (now Tuskegee University) where he taught for 47 years.</li>
        <li><span>1898</span> - From 1898-1943 Carver published 44 practical bulletins for farmers. Spaning the subject of sweet potatoes, cotton, cowpeas, alfalfa, wild plums, tomatoes, ornamental plants, corn, poultry, dairying, hogs, preserving meats in hot weather, and nature study in schools.</li>
        <li><span>1915</span> - Carver began developing techniques to improve soils depleted by repeated planting of cotton thus playing a big part in the revival of agriculture in the southern United States.</li>
        <li><span>1921</span> - In 1921, George Washington Carver testified before Congress on behalf of the United Peanut Association of America.</li>
        <li><span>1928</span> - Receives an Honorary Doctorates Degree of Science from Simpson college.</li>
        <li><span>1934</span> - Begins a correspondence with Henry ford.</li>
        <li><span>1942</span> - Arrives in Dearborn Michigan to assist Henry Ford in the development of a synthetic rubber substitute.</li>
        <li><span>Jan 5 1943</span> - George Washington Carver dies at the Tuskegee Institute</li> 
</ul>
</div>
<div id="image2">
    <img id="image2" src="https://upload.wikimedia.org/wikipedia/commons/8/8b/GEORGE_WASHINGTON_CARVER_-_ONE_OF_AMERICA%27S_GREAT_SCIENTISTS_-_NARA_-_535694.jpg"
</div>
<footer>
    <h3>If you wish to know more about George Washington Carver and his many contributions <a id="tribute-link" href="https://en.wikipedia.org/wiki/George_Washington_Carver" target="_blank">at his Wikipedia Entry</a></h3>
</main>
</body>
</html>

CSS-------

html {font-size: 10px;}

body {font-family: Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #333;
  margin: 0;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0;
}

h2, h3 {
  font-size: 2rem;
  color:#74638f; 
}

img {
  display: block;
  height: auto;
  background-color: black;
}

#img {  margin: 0 auto;
max-width: 100%;}

figure {
  font-size: 1.5rem;
  background-color: black;
  font-style: italic;
  padding: 2px;
  text-align:center;
}
  
a {
  color: #477ca7;
}

a:visited {
  color: #008000;
}

#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: #eee;
}

#img-div {
  background: white;
  padding: auto;
  padding-top: 35px;
  margin: 0;
}

ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
}

li {
  margin: 7px 0;
}

I spot a few issues here

In your HTML it looks like you have duplicate ids

Also, image elements are self closing and do not have end tags

And then in your CSS, it doesn’t look like you have an element with and id of img

So for the CSS I have these back to back…

img {
  display: block;
  height: auto;
  background-color: black;
}

#img {  margin: 0 auto;
max-width: 100%;}

I think I am misunderstanding the #img and img selectors…not sure why or if I need both…

I’m trying to rework the html now…

Does it make sense to change the HTML to …

<div>
    <figure id="img-div">
    <img id="image" src="https://org-dcmp-staticassets.s3.us-east-1.amazonaws.com/posterimages/17247_1.jpg">
    <figcaption id="img-caption">"There is no short cut to achievement. Life requires thorough preparation—veneer isn't worth anything."
    </figcaption>
    </figure>
</div>

…removing the div element id and so that the img element and div element dont have the same id ?

…And thank you so much for helping !!!

That worked for the img element needing an id of image but now my … CSS is failing these two tests.

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

  • Failed:Your #image should be centered within its parent.

I tried adding margin left and margin right auto to the #img selector but still get the same message.


img {
  display: block;
  height: auto;
  background-color: black;
}

#img {  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;}

My question is why though.
It doesn’t look like you have an element that uses an id called img unless I missed that in your HTML.
It looks like you can combine all of those properties into the img selector
Does that make sense?

So img will target all img elements on the page
#img will target elements where you gave an id of img to which it doesn’t look like you did.
Maybe you meant to write #image instead because you do have that id in your HTML.

Yes, that is correct.
id names have to be unique

I would suggest deleting this #img selector because it doesn’t look like you need it

Instead, move the margin: 0 auto; and max-width: 100%; into here

1 Like

Thank you SOOOOOOOOOO much !!! That did the trick…!!!

I didn’t understand that #img was selecting an element with an id of img…
I really appreciate your help…

Happy to help.
Glad you were able to get the tests passing :+1:

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