Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your #image should be centered within its parent.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <h1 id="title">Salvador Dali</h1>
      <figure id="img-div">
        <a href="https://en.wikipedia.org/wiki/Salvador_Dal%C3%AD#/media/File:Salvador_Dal%C3%AD_1939.jpg" target="_blank"><img id="image" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Salvador_Dal%C3%AD_1939.jpg"></a>
        <figcaption id="img-caption">Dali in 1939</figcaption>
      </figure>
      <section id="tribute-info">
        <h3><strong>Here's a brief time line for Dali's life:</strong></h3>
        <div id="list">
        <ul>
          <li><strong>11 May 1904</strong> - born in Figueres, Catalonia, Spain</li>
          <li><strong>1929</strong> - joined the Surrealist group</li>
          <li><strong>August 1931</strong> - his best-known work,<a href="https://en.wikipedia.org/wiki/The_Persistence_of_Memory" target="_blank"> Persistence of Memory</a>, was completed</li>
          <li><strong>1936 to 1939</strong> - lived in France throughout the <a href="https://en.wikipedia.org/wiki/Spanish_Civil_War " target="_blank">Spanish Civil War</a></li>
          <li><strong>1940</strong> - moved to the United States and achieved his commercial success</li>
          <li><strong>1948</strong> - returned to Spain</li>
          <li><strong>1989</strong> - dies at the age of 84 (Figueres, Catalonia, Spain)
        </ul>
        </div>
        <h3 id="tribute-link-text">If you have time, you should read more about him on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Salvador_Dal%C3%AD" target="_blank" value="tribute-link">Wikipedia entry</a>.</h3>
      </section>
    </main>
  </body>
</html>

/* file: styles.css */
body {
  text-align: center;
  color: #333;
  margin: 0;
  font-size: 1.6rem;
  font-family: monospace;
  line-height: 1.5;
  display: block;
}
#image {
  width: 450;
  max-width: 100%;
  height: auto;
  border: 10px solid black;
  display: block;
  margin: 0 auto;
}
main {
  background-color: #eee;
  margin: 45;
}
a {
  text-decoration: none;
}
a:hover {
  color: #eee;
  background-color: #333;
}
#list {
  display: flex;
  flex-direction: column;
  position: relative;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

I got stuck at this particular task and dunno what to do.

3

I changed it this way and it worked. (I just deleted the anchor element before img element and added a parent div element to it.)

** start of undefined **

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <h1 id="title">Salvador Dali</h1>
      <figure id="img-div">
        <div class="img-parent">
          <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Salvador_Dal%C3%AD_1939.jpg">
        </div>
        <figcaption id="img-caption">Dali in 1939</figcaption>
      </figure>
      <section id="tribute-info">
        <h3><strong>Here's a brief time line for Dali's life:</strong></h3>
        <div id="list">
        <ul>
          <li><strong>11 May 1904</strong> - born in Figueres, Catalonia, Spain</li>
          <li><strong>1929</strong> - joined the Surrealist group</li>
          <li><strong>August 1931</strong> - his best-known work,<a href="https://en.wikipedia.org/wiki/The_Persistence_of_Memory" target="_blank"> Persistence of Memory</a>, was completed</li>
          <li><strong>1936 to 1939</strong> - lived in France throughout the <a href="https://en.wikipedia.org/wiki/Spanish_Civil_War " target="_blank">Spanish Civil War</a></li>
          <li><strong>1940</strong> - moved to the United States and achieved his commercial success</li>
          <li><strong>1948</strong> - returned to Spain</li>
          <li><strong>1989</strong> - dies at the age of 84 (Figueres, Catalonia, Spain)
        </ul>
        </div>
        <h3 id="tribute-link-text">If you have time, you should read more about him on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Salvador_Dal%C3%AD" target="_blank" value="tribute-link">Wikipedia entry</a>.</h3>
      </section>
    </main>
  </body>
</html>

** end of undefined **

** start of undefined **

body {
  text-align: center;
  color: #333;
  margin: 0;
  font-size: 1.6rem;
  font-family: monospace;
  line-height: 1.5;
  display: block;
}
.img-parent {
  display: flex;
  justify-content: center;
}
#image {
  width: 450px;
  max-width: 100%;
  height: auto;
  border: 10px solid black;
  display: block;
}
main {
  background-color: #eee;
  margin: 45;
}
a {
  text-decoration: none;
}
a:hover {
  color: #eee;
  background-color: #333;
}
#list {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}
li {
  text-align: left;
}

** end of undefined **
4

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