Tribute page passing 5/10

Hi All, I would like some help completing the tribute 's page test. The page looks good but it needs to pass the test of 10/10.

attached is the error;

4. Within the “img-div” element, I should see an element with a corresponding id=“image”.

Element is not a child of id=“img-div” : expected 0 to equal 1 AssertionError: Element is not a child of id="img
/////my codes are here;

<div>
	<id="img-div"> <a href="#">
<img id="img-div" class="larger-image thick-red-border" src="https://mihistoriauniversal.com/wp-content/uploads/Jean-Jacques-Dessalines.jpg" alt="Jean Jacques Dessaline father of freedom.">
</a>
    <p id="img-div">Jean Jacques Dessaline</p>
	</div>

I’ve edited your post 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.

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

1 Like

Well, I see a couple of problems here.

First of all, there should always be only one thing with a given id on a page. They must be unique, always. I see 3 things with id “img-div”. Presumably it shouldn’t be on any of those but on the wrapping div at the top of this snippet.

Specifically with regards to that error message. It is looking inside the element with the id “img-div” (presumably the first one it finds) and looking for an id of “image” - it can’t find it because it isn’t there.

Does that help?

1 Like

Attached is the code, please take a look.

<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lte IE 9]>
<html lang="en" class="oldie">
<![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en">
<!--<![endif]-->

<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');	
:root {				
	--red-color: red;
}
.white-text {
		color: white;
}

.description {
	font-family: Lobster, monospace;
	font-style: nomospace, italic;
	font-weight: 1000px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
.header {
  padding: 0 0.625rem;
  margin-bottom: 1.875rem;
  background-color: black;
  margin-bottom: -34px;
}
.larger-image {
	width: 1200px;
	height: 600px;
	margin: 50px;
}
div {
	color: white;
}
div:hover {
			color: yellow;
}
article {
	background-color: black;
}
					
form {
		<!--backgroud: #09A7A1;-->
		background: --red-color;
		hight: 10px;
		width: 40;
}
body {
		background: white;
		color: white;
		font-family: monospace;
		margin-bottom: -25px;
}
							
h1{
	font-family: Lobster, monospace;
	text-align: center;
}
h1:hover {
	color: white;
}
h2 {
	text-align: center;
}
a {
text-align: center;
}								 
h2:hover {

			color: blue;
}
p {
	background-color: black;
	position: top 15px;
	fontsize: 16px;
	font-family: monospace;
	line-height: 25px;
	text-align: center;
}

#button {
		background-color: red;
		color: white
		padding: 0.5em;
		text-align: center;
		margin-right: auto, auto 0;
}
											
.thick-red-border{
     border-color: red;
     border-width: 5px;
     border-style: solid;
     border-radius: 10px;
     margin: center;
     margin-top: -20px;
     margin-bottom: 3px;
   }
.silver-background {
    background-color: silver;
  }
.red-text {
	color: red;  
	}
.black-text {
	background-color: black;
	  color: white;
  }
h1{	
	text-align: center;  
  }
	li {
		line-height: 25px;
		}
.main {
	text-align: center
	

}
#footer {
    background-color: red;
    color: white;
    padding: 0.5em;
    text-align: center;
  }

</style>
</head>

<header id="main" class="header">
	<h1 id="title">Emperor: Jean-Jacques Dessaline</h1>
	<p id="description" class="description">Jean Jacques Dessaline</p>	
 
</header>
<!--<main id="header">-->
<h1>
<div>
<button id="button" >
<div id="button">Contact us</div>
</button>
<button id="button">
<div id="button">Comments!!</div>
</button >
<button id="button">
<div id="button">twitter us</div>
</button>
</h1>
</div>
</head>

<main id="header">
<h3 id="title"class="blue-text red-text" id="orange-text"From Slavery to Emperor of Liberty></h3>
<!--My error is in this area of the code-->

<div id="img-div">
	<a href="#"><img id="img-div" id="img-caption" class="larger-image thick-red-border" src="https://mihistoriauniversal.com/wp-content/uploads/Jean-Jacques-Dessalines.jpg" alt="Jean Jacques Dessaline father of freedom."></a>
    <p>Jean Jacques Dessaline</p>
</div>	
<body>
<header class="main-header"></header> 
	<div class="black-text">
			<h2 class="blue-text red-text">During the colonial era, slaves were deprived of their family names and they were forced to carry their owner's name.</h2>
			<p>This strategy was not only used to illustrate ownership over the slave's physical and mental being, but it is also used to display the wealth and state of the colonial family prosperity. This child, whom the world would know as Jean Jacques Dessalines, was kidnapped in one of the valley of the West Africa Continent, more or less, in a country name Benin where the Haitian culture is very similar to as compare to other countries in the African continent. Jean-Jacques Dessaline was brought to the French West Indian Colony of Saint Domingue(Haiti) as a child slave. He worked hard and became the field hand for the white master. He later joined the slave rebellion that broke out amid a turmoil caused by the French revelution.<br> If interested about the history of Jean Jacques Dessaline please follow this link <a class="white-text" target="_blank" href="https://www.youtube.com/watch?v=fqdhtoi_ZgM"> link to learn more about Jean-Jacque Dessalines. </a>
			<p>The Leader of the First Black republic</p>
			<ul>
				<li><strong>20 September 1758 – 17 October 1806</strong> Dessalines was a leader of the Haitian Revolution and the first ruler of an independent Haiti under the 1805 constitution</li>
				<li><strong>Born: September 20, 1758,</strong> Cormier, Grand-Riviere-du-North, Saint Domingue, Haiti.</li>
		        <li>Died: <strong>October 17, 1806</strong>, Pont Lamage, near port-au-Prince, Haiti</li>
			    <li><strong>1804-1806:</strong> Dessalines was named Emperor of Haiti as Jacques</li>
			    <li><strong>1802</strong>: Jean Jacques Dessalines became the leader of the revolution of the First Black Nation, Haiti.</li>
			    <li><strong>1803</strong>: Jean Jacques Dessalines defeated a French army at the Battle of Vertières.</li>
			    <li><strong>1804</strong>: Jean Jacques Dessalines declared Haiti an independent nation</li>  
		    </ul>
		 </div>
		 </div>   
  </body>
</main>
<footer id="footer">&copy; 2020 Tribute-Page by: Jean Daniel Ulysse</footer>
</html>
  1. Within the “img-div” element, I should see an element with a corresponding id=“image”.
    Element is not a child of id=“img-div” : expected 0 to equal 1
    AssertionError: Element is not a child of id=“img-div” : expected 0 to equal 1
    at Proxy.c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:1889)
    at Proxy.l (https://cdn.freecodecamp.or

I’ve edited your post 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.

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

Please format your code correctly.

<div id="img-div">
	<a href="#"><img id="img-div" id="img-caption" class="larger-image thick-red-border" src="https://mihistoriauniversal.com/wp-content/uploads/Jean-Jacques-Dessalines.jpg" alt="Jean Jacques Dessaline father of freedom."></a>
    <p>Jean Jacques Dessaline</p>
</div>	

Please reread my original post more closely.

OK, now you have fewer duplicate ids and at least one of them is in the right place. But you should have no duplicate ids and the interior one should be “image”.

Also, that image has two ids. The uniqueness of ids works both ways - the ids should be unique and anything that has an id should only have one id.

Hi @jeandulysse!

I have formatted your code so you can see the errors more clearly.

HTML

<header id="main" class="header">
  <h1 id="title">Emperor: Jean-Jacques Dessaline</h1>
  <p id="description" class="description">Jean Jacques Dessaline</p>

</header>
<!--<main id="header">-->
<h1>
  <div>
    <button id="button">
      <div id="button">Contact us</div>
    </button>
    <button id="button">
      <div id="button">Comments!!</div>
    </button>
    <button id="button">
      <div id="button">twitter us</div>
    </button>
</h1>
</div>


<main id="header">
  <h3 id="title" class="blue-text red-text" id="orange-text" From Slavery to Emperor of Liberty></h3>
  <!--My error is in this area of the code-->

  <div id="img-div">
    <a href="#"><img id="img-div" id="img-caption" class="larger-image thick-red-border" src="https://mihistoriauniversal.com/wp-content/uploads/Jean-Jacques-Dessalines.jpg" alt="Jean Jacques Dessaline father of freedom."></a>
    <p>Jean Jacques Dessaline</p>
  </div>

  <body>
    <header class="main-header"></header>
    <div class="black-text">
      <h2 class="blue-text red-text">During the colonial era, slaves were deprived of their family names and they were forced to carry their owner's name.</h2>
      <p>This strategy was not only used to illustrate ownership over the slave's physical and mental being, but it is also used to display the wealth and state of the colonial family prosperity. This child, whom the world would know as Jean Jacques Dessalines, was kidnapped in one of the valley of the West Africa Continent, more or less, in a country name Benin where the Haitian culture is very similar to as compare to other countries in the African continent. Jean-Jacques Dessaline was brought to the French West Indian Colony of Saint Domingue(Haiti) as a child slave. He worked hard and became the field hand for the white master. He later joined the slave rebellion that broke out amid a turmoil caused by the French revelution.<br> If interested about the history of Jean Jacques Dessaline please follow this link <a class="white-text" target="_blank" href="https://www.youtube.com/watch?v=fqdhtoi_ZgM"> link to learn more about Jean-Jacque Dessalines. </a>
      <p>The Leader of the First Black republic</p>
      <ul>
        <li><strong>20 September 1758 – 17 October 1806</strong> Dessalines was a leader of the Haitian Revolution and the first ruler of an independent Haiti under the 1805 constitution</li>
        <li><strong>Born: September 20, 1758,</strong> Cormier, Grand-Riviere-du-North, Saint Domingue, Haiti.</li>
        <li>Died: <strong>October 17, 1806</strong>, Pont Lamage, near port-au-Prince, Haiti</li>
        <li><strong>1804-1806:</strong> Dessalines was named Emperor of Haiti as Jacques</li>
        <li><strong>1802</strong>: Jean Jacques Dessalines became the leader of the revolution of the First Black Nation, Haiti.</li>
        <li><strong>1803</strong>: Jean Jacques Dessalines defeated a French army at the Battle of Vertières.</li>
        <li><strong>1804</strong>: Jean Jacques Dessalines declared Haiti an independent nation</li>
      </ul>
    </div>
    </div>
  </body>
</main>
<footer id="footer">&copy; 2020 Tribute-Page by: Jean Daniel Ulysse</footer>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

:root {				
   --red-color: red;
}

.white-text {
	color: white;
}

.description {
	font-family: Lobster, monospace;
	font-style: nomospace, italic;
	font-weight: 1000px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.header {
    padding: 0 0.625rem;
    margin-bottom: 1.875rem;
    background-color: black;
    margin-bottom: -34px;
}

.larger-image {
	width: 1200px;
	height: 600px;
	margin: 50px;
}

div {
	color: white;
}

div:hover {
	color: yellow;
}

article {
	background-color: black;
}
					
form {
    <!--backgroud: #09A7A1;-->
    background: --red-color;
    hight: 10px;
    width: 40;
}

body {
    background: white;
    color: white;
    font-family: monospace;
    margin-bottom: -25px;
}
							
h1 {
	font-family: Lobster, monospace;
	text-align: center;
}

h1:hover {
	color: white;
}

h2 {
	text-align: center;
}

a {
    text-align: center;
}
								 
h2:hover {
    color: blue;
}

p {
	background-color: black;
	position: top 15px;
	fontsize: 16px;
	font-family: monospace;
	line-height: 25px;
	text-align: center;
}

#button {
    background-color: red;
    color: white
    padding: 0.5em;
    text-align: center;
    margin-right: auto, auto 0;
}
											
.thick-red-border{
    border-color: red;
    border-width: 5px;
    border-style: solid;
    border-radius: 10px;
    margin: center;
    margin-top: -20px;
    margin-bottom: 3px;
}

.silver-background {
    background-color: silver;
}

.red-text {
	color: red;  
}

.black-text {
	background-color: black;
    color: white;
}

h1 {	
	text-align: center;  
}

li {
    line-height: 25px;
}

.main {
	text-align: center
}

#footer {
    background-color: red;
    color: white;
    padding: 0.5em;
    text-align: center;
}

Proper formatting is really important because it helps you identify errors in your code. This will also help you pass the other failing tests.

I am also going to link the html validator and css validator to help you catch errors.


Hope that helps!

Thanks! Great response
I will follow the advice. I hope to share this experience with others 
Jean D. Ulysse

What is a dropdown element??

@bobbybotsane

  1. if you have a question it’s best to open your own thread rather than taking away from the OP’s post
  2. prior to reposting, be sure and tell us what your search for dropdown element gave you that you didn’t understand