Build a Tribute Page: Trouble with #img-caption and #img-div

I have been able to pass every test except for two of them:

  1. Your #img-div, #image, #img-caption, #tribute-info, and #tribute-link should all be descendants of #main.
  2. Your #img-caption should be a descendant of #img-div.

here is my code:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="">
<html lang="en">
<link rel="stylesheet" href="styles.css">
<title id="title">Miriam's Fact Sheet</title>
<link href='https://fonts.googleapis.com/css?family=Caprasimo' rel='stylesheet'>
<style>
body {
    font-family: 'Caprasimo';
}
</style>
</head>
<body>
<main id="main">
  <h1>Miriam in Abarahmic Religious Traditions</h1>
</main>
<div id="img-div">
<img id="image"src="https://www.myjewishlearning.com/wp-content/uploads/2019/06/Dura_Europos_fresco_Moses_from_river.jpg"></div>
<figcaption id="img-caption"><p>Mural of Miriam from first century CE Palestine.</p></figcaption>
<div id="tribute-info"><p>Miriam is an important figure in the Abarhamic Faith tradtions.</p> </div>
<a id="tribute-link" href=""target="_blank"></a>
</body>
</html> 
body {
background-image: url(https://64.media.tumblr.com/002337dcc2b8e59bbdbd74b5f0634240/tumblr_pgcsenvTpg1vpf6ddo1_400.gif);}

h1{
font-size: 25px;
color:white;
font-family: 'Caprasimo';
text-align: center;}

p{
color: white; 
}

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

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/114.0

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Hello!
My suggestion is to try moving your main closing element to just before your body closing element at the bottom. This, I think, should solve the issue.

1 Like

A “descendant” element is an element that is nested in another.

<parent>
  <descendant>
</parent>

Also, the DOCTYPE declaration is just a one-line declaration; it’s not the opening tag for the html. Try nesting your content in this general format:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

Finally, make sure you’re indenting and formatting correctly, too- it makes it a lot easier for you to visualize the code structure, especially when it gets more complicated. You could start by taking the style rule from your head and putting it in your CSS like so:

Old

body {
background-image: url( /* url here */ );}

New

body {
  background-image: url( /* url here */ );
  font-family: 'Caprasimo';
}

Mind the brackets and spacing. Good luck!

2 Likes

Thank you so much, it fixed the first problem I had perfectly!!:slight_smile:

1 Like

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