Tribute Page - CSS Trouble

HTML-CSS
1

I can’t seem to find the solution. I’m failing 3 of the CSS tests.

  1. Your img element should have a display of block
  2. Your #image should have a max-width of 100%
  3. Your #image should be centered within its parent
<html>
    <head>
      <meta charset="UTF-8">
      <meta lang="en">
      <link rel='stylesheet' ref='styles.css'>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    
<main id='main'>
  
<h1 id='title'>Ted Kennedy</h1>
<h2>A Tribute Page to Ted Kennedy</h2>
<figure id='img-div'>
  <img id='image' src="https://www.nps.gov/articles/000/images/Ted_Kennedy-_official_photo_portrait_crop.jpg?maxwidth=650&autorotate=false&quality=78&format=webp" alt="Ted Kennedy">
  <figcaption id="img-caption">Ted Kennedy<figcaption>
    </figure>



<div id="tribute-info">
  <ul>
<li>Birth</li>
<li>Family</li>
<li>Politics</li>
<li>Sports</li>
<li>Death</li>
    </ul>
  </div>  

  <footer>If you have time, you should read more about Ted Kennedy in <a href='https://www.amazon.com/Ted-Kennedy-Life-John-Farrell-ebook/dp/B09R6W3ZKV/ref=sr_1_1?crid=1YEQJB9GQLZIU&keywords=ted+kennedy&qid=1672782745&sprefix=ted+kennedy%2Caps%2C102&sr=8-1' id='tribute-link' target='_blank'>"Ted Kennedy: A Life"</a></footer>  

  </main>
  </html>

img {
display: block;
}


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

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3

Hi.
From what I can see you didn’ t close the figcaption element properly.
See if that helps.

4

Good catch. I fixed that, but I’m still not passing the CSS tests.

5

hi there, you have multiple issue in the code that you should fix (and that may help you with the errors you are seeing).

Please copy your html code to this online html validator and fix all the errors being reported to you.

(let us know if you need help fixing any of them or didn’t understand a message)

1 Like
6

Wonderful tip, Hanna. Thank you.

I’m now down to just one error: Your img element should have a display of block

I checked this in w3validator but found now errors. Any suggestions?

img {
  display: block;
}

#image {
max-width:100%;
height:auto;
display:flex;
}
1 Like
7

can you share the latest html code as well?

8 
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
      
      <link rel='stylesheet' href='styles.css'>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
      <title id='title'>Ted Kennedy</title>
  </head>
<main id='main'>
<h2>A Tribute Page to Ted Kennedy</h2>
<figure id='img-div'>
  <img id='image' src="https://www.nps.gov/articles/000/images/Ted_Kennedy-_official_photo_portrait_crop.jpg?maxwidth=650&autorotate=false&quality=78&format=webp" alt="Ted Kennedy">
  <figcaption id="img-caption">Ted Kennedy</figcaption>
    </figure>

<div id="tribute-info">
  <ul>
<li>Birth</li>
<li>Family</li>
<li>Politics</li>
<li>Sports</li>
<li>Death</li>
    </ul>
  </div>  

  <footer>If you have time, you should read more about Ted Kennedy in <a href='https://www.amazon.com/Ted-Kennedy-Life-John-Farrell-ebook/dp/B09R6W3ZKV/ref=sr_1_1?crid=1YEQJB9GQLZIU&keywords=ted+kennedy&qid=1672782745&sprefix=ted+kennedy%2Caps%2C102&sr=8-1' id='tribute-link' target='_blank'>"Ted Kennedy: A Life"</a></footer>  

  </main>
  </html>
9

okay so you see how you set display block on img then you took that away later when you set display to flex on the same element using the #image id?

You should not set display to flex on the #image.
If you want to center, you can look at setting the margins (left and right) to auto.

1 Like