Tribute Page - Descendant of #main error

HTML-CSS
1

Hi there,

All the tests under the Build a Tribute page have come back completed except for one:
“Your #img-div , #image , #img-caption , #tribute-info , and #tribute-link should all be descendants of #main .”

Can anyone chime in?

<!DOCTYPE html>
 <link rel="stylesheet" href="styles.css">

<main id="main">

    <h1 id="title">
        Dr. Suess
    </h1>
   <figure id="img-div">
       <img id="image" src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTY2NzA3NTQzNjM5MzM2MjI4/dr_seuss_1957_getty_images_3240530jpg.jpg">
       <div id="img-caption">
           Dr. Suess as a young man
       </div>
   </figure>
   <body id="tribute-info">
    Dr. Suess is a name you're probably familiar with. The author of many children's classics, such as, "A Cat in a Hat", "How the Grinch Stole Christmas", "The Lorax", and many more.
   </body>
   <h3> If you'd like to learn more about this amazing cartoonist's life, check out their
   <a id="tribute-link" href="https://en.wikipedia.org/wiki/Dr._Seuss" target="_blank"> Wikipedia entry</a>
.
   </h3>
</main>
1 Like
2

The issue may be due to the placement of the main element. In HTML the main element represents the main content of the body element on a page. If you wrap everything in a body element instead of where you currently have the body element it may fix your issues.

3

Thanks Alabastor!

I ended up just changing the body to a div and that worked.

Cheers

4

The solution is just simple as correcting:
href=“./styles.css”

5

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