Tribute Page - Build a Tribute Page

I finished the project, however, I want to improve my skills and make my project look cleaner. I would like to know how to put my image in a big white box with the text describing the image. I tried using sections and divs but couldn’t get the desired result. Does anyone know how ??

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <h1 id="title"><bold>Chainsaw Man</bold></h1>
      <p>Neighbourhood friendly Chainsaw Man</p>
      <div id="img-div" class="block">  
        <img id="image" src="https://www.anime-internet.com/content/images/2022/05/chainsaw-man-81-1024x576-2.jpg" > 
        <div id="img-caption">Chainsaw Man beating the villainous Katana Man</div>
        <p id="tribute-info"><a id="tribute-link" href="https://chainsaw-man.fandom.com/wiki/Chainsaw_Man_Wiki" target="_blank">Chainsaw Man's History</a></p>
        
        
      </div>


    </main>

  </body>


</html>
/* file: styles.css */
body {
 background-color:rgb(255,255,0);
 color: rgb(0,0,0);
 text-align:center;
 width:100%;
 height:10%;
 display:block;
}

.block{
  background-color:rbg(255,255,255);
  margin-left:auto;
  margin-right:auto;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

I did this /* file: styles.css */

body {
 background-color:rgb(255,255,0);
  box-sizing:border-box;
  margin:0;
  padding:0;
  text-align:center;
}
#img-div {
  
  width:100vw;
  display:grid;
  place-items:center;

}

#image{
  max-width:100%;
  height:auto;
  border:5px solid white;
  margin:0;
  padding:0;
  width:70vw;
}

#img-caption { 
display:inline-block;
background:white;
margin:0;
padding:0;
border:5px solid white;
width:70vw;
}

not sure if that’s something similar to what you had in mind.

I’ve edited your code 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 (').

But, more precisely, for you to get a box surrounding something etc, it has to do with styling, and therefore, CSS. You can for example have an element inside of another element.
(an image inside of a div)
and you can set the background color for the div to be white, and position it / size it how you want, and then position the image inside of it, and the div will be your white box, it doesn’t have to be a div, you can / should choose whatever makes the most sense semantically, but this is just an example.

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