Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

I am stuck at centering my #image within the parents, I tried many method but I don’t know what is the problem.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css"/>
    <title >Blooms in the Battlefield</title>
    </head>
    <body>
      <header>
        
        </header>
        <main id="main">
         
           <h1 id="title">Blooms in the Battlefield</h1> 
          
         <div id="img-div">
           <p id="tribute-info" class="intro"><b>Clad in simple wear and armed with a common firearm.</b></p>
           <img id="image" src="https://png.pngtree.com/thumb_back/fw800/background/20240912/pngtree-a-desolate-battlefield-with-poppy-flowers-growing-among-the-charred-ground-image_16175674.jpg"/>
           <figcaption id="img-caption"><a href="https://english.palinfo.com/?p=326189" target="_blank" id="tribute-link">Memoral day</a> : 28 September, 2024</figcaption>
         </div>
         <hr></hr>
         <p class="first"><i>The fearless souls that are pure and courageous, who died unjustily defending their home and belief. Shedding blood and tears, some left with no whole corpses or remains.</i><br/><br />
         No one bore witness to their fall but God.
        <br/><br />
        <strong>Burdened with wounds and scars, yet unwavering, always leading the charge without fear of the enemy's numbers or tanks.
          </strong>
       
       <br/><br />
       <i>Their hearts are as tough as steel, their souls as pure as gold, their mind are as clear as the sky.</i>
       <br /><br />
Like the beautiful flowers that bloom on rocks, though short-lived but rare and pure. they may have lost their physical form but they have won the moral war. <br/><br/>
<i>We shall not mourn them but engrave their names in our hearts.</i>
</p>
<hr></hr>
<br />
          </main>
          <footer>
            <p class="blood"><i>They will always be remembered, No hero dies!</i></p>
          </footer>
      </body>
  </html>

/* file: styles.css */
body {
  background:linear-gradient(to bottom, #C5C6D0,#5C5858,#555555,#333333, #333333,#232023, black);
padding:20px;
margin:10px;
font-family:'Times New Roman', 'Georgia',serif;

}
 
#img-caption {
  font-size:5px;
  
}
.intro {
  color:#A03A00;
text-align:center;
  
}

h1 {
  text-align:center;
  color:#232023;
 white-space:nowrap;
}
P {
color:silver;
text-align:center;
}
a {
  color:silver;
}

#img-div {
width:100%;
height:auto;

}
#image {
  max-width:100%;
  height:auto;
  margin:0 auto;

  border-radius:15px;
  border-style:solid;
  
display:block;  
border-color:silver;
      
    
}
#img-caption {
  font-size:15px;
  text-align:center;
}

.blood {
  font-size:1.2rem;
  position:relative;
  padding-top:20px;
  color:#C00000;
  text-shadow:0 0 15px rgba(255,0,0,0.5), 0 0 10px rgba(255,0,0,0.5);
  text-align:center;
}

Your browser information:

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

Summary

This text will be hidden

Challenge Information:

Tribute Page - Build a Tribute Page

2

Is the #img-div centered on the screen as well? If you put a border around that div element, would it have any overflow?

3

I don’t think so, the problem seem to be with default set up but I don’t know what is missing?

4

Do you mind if I copy the code over to my codepen so I can visualize it better? I’ll be sure to not save a thing.

5

I don’t mind but please make sure it not saved. thank you for taking the time to help me.

6

if you use border and/or padding, you need also to set box-sizing to box-border, for how the width and height are calculated and checked

1 Like
7

After putting it in, it looks centered to me (I didn’t save your project :slightly_smiling_face:). Do you have a codepen account? That’s where I’ve built all of my projects. When I run into problems with positioning elements on a page, I find it helps to put a border around the parent element so I can see where it sits. Maybe another thing that could help would be to declare the viewport using a <meta> element. What else have you tried?

Also, your project is beautiful. I love it!

1 Like
8

Thank you, I will check it but I am confused because I have not set a width or height to the parents. I can’t set any because it will ruin the whole design.

9

I will try it thank you and I am happy that you liked my project.

1 Like
10

I solved it, thank you all for help. I set the box-border then set a border to know why my image is not centered and then I added a right padding and it passed!

1 Like