Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

getting error message Your img element should have a display of block .

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8"
    <meta http-equiv="x-ua">
    <meta name="viewport">
    <title>THFC</title>
   l<link rel="stylesheet" href="./style.css"
</head>
<body><main id="main"><h1 id="title">Tottenham Hotspur Football Club</h1>
<h3> A Brief History of Tottenham Hotspur Football Club</h3>
<div class="img-container" id="img-div">
<img src="https://bpb-us-e1.wpmucdn.com/wordpressua.uark.edu/dist/6/414/files/2023/08/Hotspur-Team.png"" 
alt="Spurs 1920
class="image"
id="image"
/>
<div class="caption" id="img-caption">
  Tottenham Hotspur 1stXI 1920
</div>
</div>
<div class="life">
  <p class="life header bold">
    A brief timeline of Tottenham Hotspur Football Club
    </p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

.image{
object-fit: contain;
border-radius: 10px;
max-width: 100%;
display: block;
height: auto;
margin: auto;
}

3

You have a number of issues with your HTML, including missing angle brackets and stray characters. You have a both in the line above. There are quite a few others too.
Also, your CSS file is styles.css not style.css.

Some of your HTML code appears to be missing from your post too, as you have no closing tags for your body or html elements or the .life div, for one thing.

As for the specific error which you requested help with, you have a CSS selector for .image but not for #image, which means that some of those image-related tests which specifically ask you to use the #image selector will fail. You also have a stray " in your img element, which may be causing problems too.

I think you’ll need to go through your code line by line, ensuring that you’ve eradicated all typos and syntax errors first. Then it will be easier to address those User Stories which are not yet passing.

1 Like
4

thanks for that down to one error now still failing on display block amended code below

<body><main id="main"><h1 id="title">Tottenham Hotspur Football Club</h1>

<h3> A Brief History of Tottenham Hotspur Football Club</h3>

<div class="img-container" id="img-div">

<img src="https://bpb-us-e1.wpmucdn.com/wordpressua.uark.edu/dist/6/414/files/2023/08/Hotspur-Team.png"

alt="Tottenham Hotspur 1stXI 1920"

id="image">

<div class="caption" id="img-caption">

Tottenham Hotspur 1stXI 1920

</div>

</div>

.img{
  display:block;
}
#image{
  max-width:100%;
}
#img-container{
  max-width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
5

You have set display: block here but you don’t have an img class attribute in your img element, so that CSS rule isn’t being applied to anything.

If you want to target an element type directly, you can use the element name, but you shouldn’t prefix it with a dot. You use a dot to denote a class and a hash to denote an id, but no prefix if you want to target the an element by its type.