Tribute Page - Build a Tribute Page

HTML-CSS
1

So my issue is that #image should be centered within its parent. I dont know how to do this can someone help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>


<body>
  <main id="main">
    <title>Jagraj Singh Tribute</title>
  <div class="header">
    <h1 id="title">Jagraj Singh</h1>
    <p id="under">Helped spread Guru's message worldwide</p>
  </div>


  <div id="img-div">
      <img src="https://www.sikhnet.com/files/styles/hero-image/public/gurbani/artists/images/jagraj-singh-bos.jpg?itok=oAWiE9GP" alt="Jagraj on stage smiling" id="image">

  
      <figcaption id="img-caption">Respected internationally for his “street parchar”, he started several initiatives in 2012 to raise awareness of the Sikh faith.<br>Since then, he has trained dozens of parchariks (preachers) worldwide. He has spoken at camps and events across the world as well.</figcaption>

  <div class="list">
      <p id="tribute-info"><strong>Here are some facts about him:</strong></p>
  
      <ul>
        <li><strong>-</strong> Grew up in West London</li>
        <br>
        <li><strong>-</strong> Became a British Army Officer around the age of 38</li>
        <br>
        <li><strong>-</strong> Moved into finance sector and started on his religous endeavours</li>
        <br>
        <li><strong>-</strong> Launched most successful Sikh project 'Basics Of Sikhi'</li>
        <br>
        <li><strong>-</strong> Diagnosed with stage-four cancer in the liver in December 2016</li>
        <br>
        <li><strong>-</strong> Passed away on 20th July 2017</li>
        <br>
      </ul>

  



  </div>      
  </div>


  
  <p id="statement"><strong>In a statement shortly after his diagnosis, he said:</strong> "Only SatGuru Ji can give or take life away and they are never wrong, only perfect. In all the Seva that Guru Ji allowed me to do of his beautiful Panth, I've made many mistakes and I ask forgiveness from the Sangat.

    If the Guru's message has touched you and you feel it's the truth, I urge you to follow that truth and become a GurSikh as none of us knows how long we have left. Please do Ardaas that Guru Ji gives me a place in his Charan and keeps my family and the Panth in Chardi-Kala. May the Panth flourish, even if I am finished, this is pure joy for me."</p>
    <div class="last">
    <a id="tribute-link" href="https://www.youtube.com/watch?v=mSaGRXc5hBM" target="_blank">Jagraj's Speech</a>
    </div>




  </main>
<div id="bg-image"></div>

</body>

/* file: styles.css */
* {
  font-family: sans-serif;
  color: white;
  
}

#image {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
    border: 5px solid;
    border-color: orange;
    border-radius: 15px;
  }
  
  
.list {
  background-color: orange;
  border-radius: 15px;
  width: 50%;
  margin: 40px auto;
  padding: 1px;
}

ul {
  list-style: none;
  margin-right: 10px;
}


#img-div {
    margin: auto;
    width: 90%;
  }


.header {
  text-align: center;
  font-size: 25px;
}

#under {
  font-size: 15px;
  margin-bottom: 30px;
  margin-top: -15px;
}


main {
  background-color: #14213D;
  margin: auto;
  width: 70%;
  padding: 30px;
  border-radius: 15px;
}


#img-caption {
  margin-top: 20px;
}

#tribute-info {
  margin-top: 40px;
  text-align: center;
  margin-bottom: 30px;
  font-size: 20px;
}

a:hover, a:visited {
   color: orange;
}

.last {
   text-align: center;
}

#statement {
  font-family: italic;
  text-align: center;
  font-size: 17px;
}

#tribute-link {
  text-decoration: none;
}

#img-caption {
  text-align: center;
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

I put it in my browser and it appears perfectly centered though. One thing I would suggest is to set the width or max-width before setting the margin as auto. This will allow css to first calculate the entire width relative to its container (since you are specifying in %) and then calculate the margin.
Also second thing I did is also set the width of the picture. So that it is of a certain width. And then set the max-width so that it should be within a certain limit on sreens of diff sizes. So I tried…
#image{ width:100%; max-width: 100%; margin:auto; /* rest of the styles */ }
See if that would serve your purpose.

3

Thats totally fine but when i run the tests i’m still getting the “center within its parent element wrong”

4

hi there, have you tried any of the suggestions given by the previous poster skamat?
If yes, what is your new code (pls share here within a code block)

5

try using this image style it worked for me.
Mod edit: code redacted

you can see my code at mod edit: codepen link redacted

6

Hi there, this tribute page project is part of the projects needed for certification. Sharing code is not allowed on the forum in general but in this case it could cause the certificates to be revoked.

Thanks for your understanding.

7

yes i did try and said it didn’t work

8

Please post the new code so we can help further.

9

Also please try to enclose the image and figcaption within figure tag, sinceyou are using the figcaption tag,

10

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