Tribute Page - Build a Tribute Page

Tell us what’s happening: I am having trouble centering the image in it’s parent. I have the margin set to 0 auto and the image appears centered in both the small preview and the preview page. Refer to the img link with the id=‘image’ and the #image selector in the CSS section. Thanks!

Your code so far

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.

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='styles.css'>
    <title id='title'>Harriet Tubman</title>
  </head>
  <body>
    <header id='header'>
      <div class='header' id='header-div'>
        <h1 id='page-title'>Harriet Tubman</h1>
        <div>
    </header>
    <main id='main'>
      <div id='img-div'>
        <img id='image' src='https://cdn.kpbs.org/dims4/default/f0658b2/2147483647/strip/true/crop/1000x563+0+22/resize/1200x675!/quality/90/?url=http%3A%2F%2Fkpbs-brightspot.s3.amazonaws.com%2F20%2F2d%2Fd5b6c682474c9bd5a1f6555e97e9%2Fm-ht10007-ala-tr9jrt.jpg' alt='Harriet Tubman portrait'>
<figcaption id='img-caption'>Harriet Tubman: American hero</figcation>
        </div>
      <div id='tribute-info'>
        <h2 id='life-title'><u>Just a <em>few</em> of her Accomplishments</u></h2>
        <ul id='tribute-info-list'>
          <li>On <b>September 17, 1849</b>, Harriet Tubman escaped enslavement, for the first time, with her brothers Ben and Henry. Unfortunately, her brothers, for fear of the consequences, convinced her to go back with them.</li>
          <li>Later in <b>1849</b>, Harriet Tubman escaped enslavement again, alone this time.</li>
          <li>With assistance by the Underground Railroad, she made the <b>90 mile</b> journey <em>by foot</em> from Maryland to Pennsylvania.</li>
          <li>Between <b>1851-1862</b>, Harriet Tubman lead over <b>70</b> enslaved individuals to safely across the border into Canada.</li>
          <li>In <b>1859</b>, Tubman was able to purchase a plot of land in the outskirts of <b>Aubrun, New York</b>. She used this land as a safe haven for family and friends as well as many black americans looking for a better and free life in the north.</li>
          <li>In <b>1861</b>, Tubman joined the Union's civil war effors.</li>
          <ul id='tribute-info-list' class='indent'><li>From <b>1861-1863</b>, she served as a nurse at <u>Port Royal</u>, in South Carolina, providing herbal remedies to assist soldiers suffering from <em>dysentary</em>. She also worked to aid men with <em>smallpox</em> and yet never contracted it herself, which many attributed to a blessing from God.</li>
          <li>In <b>1863</b>, Tubman lead a scouting group through the land around <u>Port Royal</u> on a reconnaissance mission for the <u>Secretary of War</u>, Edwin Stanton. Thanks to her knowledge of covert travel and subterfuge among potential enemies, her group successfully mapped the unfamiliar terrain and gathered information on the people who lived there.</li>
          <li>She provided Colonel James Montgomery with key intelligence that aided in the capture of <b>Jacksonville, Florida</b>.</li>
          <li>In <b>1863</b>, Harriet Tubman became the <em>first</em> woman to lead an armed assult during the civil war. She guided three steamboats around Confederate mines in the waters leading to the shore of the <b>Combahee River</b>. Once ashore, the Union troops set fire to the plantations, destroying infrastructure and seizing thousands of dollars worth of food and supplies. When the steamboats sounded their whistles, enslaved people throughout the area understood that they were being liberated. More than <b>750</b> enslaved people were rescued in the <u>Combahee River Raid</u>.</li>
</ul>
       <li id="last-item">In <b>1896</b>, Tubman was the keynote speaker at the first meeting of the <u>National Federation of Afro-American Women</u>. </li>
        </ul>
        <h3>For more indepth information on Harriet Tubman, please visit her <a id='tribute-link' href='https://en.wikipedia.org/wiki/Harriet_Tubman#CITEREFLarson2004' target='_blank'>wikipedia page</a>.
      </div>
    </main>
  </body>
  </html>

body {Background-color: #F0EAD6; display: flex; flex-wrap: wrap; margin:0; padding: 1em 1em 1em .5em;}
#img-div { width: 100%; margin: 0 auto; padding-bottom: 20px}
#image { display: block; max-width: 100%;width: 100%; height: auto; margin: 0 auto; padding: 0; border-radius: 10px; border: 4px solid #1B0000;}
h1 {width: 100%; text-align: center; margin: 0 ; padding: 0; justify-content: center; color: #F0EAD6 }
header { margin: 0 auto; padding: 1em; width: 100%; height: 50px; max-width: 300px;}
.header {background-color: #1B0000; margin: 0; padding: 5px; width: 100%; postion: fixed; top: 0; display: flex; justify-content: center; margin-left: -5px; border: solid #1B0000; border-radius: 10px}
figcaption {color: #1B0000; font-weight: bold; text-align: center; }
#tribute-info {background-color: #1B0000; border: 5px solid #1B0000; border-radius: 10px; }
#tribute-info-list {color: #F0EAD6; margin: 0 8px 15px -15px;}
h2,h3 {text-align: center; color: #F0EAD6;}
#last-item {margin-top: -12px;}
#tribute-link {color: #F0EAD6;}
#tribute-link:hover {color: #1B0000; background-color:#F0EAD6;}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Hey, I tried your code on my machine and it worked fine. The image was in the center and the HTML and CSS looked good.

But I noticed two minor mistakes in your code:

  • The opening <div> tag within the header element is not closed properly.

  • You nested a <ul> element inside another <ul> element, which is not valid HTML.

In HTML5, it is not valid to nest a <ul> element directly within another <ul> element. Instead, the nested <ul> should be a child of an <li> element within the parent <ul> .
Nesting a list | MDN (mozilla.org)

Thank you, I fixed those issues. Do you have any idea why the system won’t pass my tribute page? The only thing it keeps saying I haven’t done is center the photo and the photo is centered. Very confused.

Realized the screen shot didn’t show the margin for my image selector.

I took a closer look and in fact the image is exceeding the boundaries of its parent container. To prevent this from happening, you should remove the width: 100% property and keep the max-width: 100% property. This will ensure that the image does not exceed its original size while still fitting within its parent container.

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