Home/ Questions/Q 7072187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:46:41+00:00

I am working on an assignment that is giving me grief. I am supposed

  • 0

I am working on an assignment that is giving me grief. I am supposed to make a red box that matches the color of an image. This box is supposed to be centered on the page. The box is supposed to be 80% of the page. The image is supposed to be inside the box. The image is supposed to be 80% width of the BOX it sits in. The image is to be centered vertically. I am trying to do this using CSS. Here is my code. What am I missing?

HTML:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <div class="box">
            <ul>
                <li>
                    <a href="http://blackhawks.nhl.com/">
                        <img src="http://www.wallpaperpimper.com/wallpaper/Hockey/Chicago_Blackhawks/Chicago-Blackhawks-Blackhawks-Logo-1-JPS6RQXFBC-1024x768.jpg">
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>

CSS:

.box  {
    width: 80%;
    background-color: #dd111;
    margin-left: auto;
    margin-right: auto;
} 
.box ul {
    margin-left:auto;
    margin-right:auto;
}
.box ul li {
    width: 80%;
    vertical-align: middle;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If the list isn’t necessary you could do this. If you want to use a list you need to set the ul padding and margin to 0.

     <style type="text/css">

    .box {
       width:80%;
       margin:0 auto 0 auto;
    }

    img {
       width:80%;
       margin:0 auto 0 auto;
       display:block;
    }

   .box-stripe {
       width:80%;
       height:15px; 
       margin:0 auto 0 auto;
   }

    </style>


    <body>

    <div class="box">

    <div class="box-stripe"></div>

    <img src="yourimage.png" alt="" />

    <div class="box-stripe"></div>

    </div>

    </body>

    Or if you prefer the list you could do something like this. It should get you close anyways. 

    <style type="text/javascript">

.box {
width:80%;
margin:0 auto 0 auto;
}

.box ul {
width:80%;
margin:0 auto 0 auto;
padding:0px;
display:block; /*may not need to do this but I don't think a UL is a block element */
}

.box ul .box-stripe {
width:100%;
display:block;
height:15px;
padding:0px;
margin:0px;
}

.box ul .img {
width:100%;
display:block;
padding:0px;
margin:0px;
}

</style>



      <body>

            <div class="box">

            <ul>

             <li>class="box-stripe"></li>

             <li class="img"><img src="yourimage.png" alt="" /></li>

             <li class="box-stripe"></li>

           </ul>

            </div>

       </body>

    Every browser treats HTML elements differently in terms of padding, margin, line height, ect. This is why I recommend a CSS reset. And most UL’s have some padding by default.

    • 0