CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 23

Why is the image at the bottom being cut off?

I need help with the following html and css. I'm trying to create a shape that looks like a banner and include some text and a image on it. I found some code for creating something that look likes a banner however, the shape (i.e, volleyball) image at the bottom is partially cut off at the bottom. Also, I'd like to have a little more space between the last item in the list and the image. Open to better way of coding as this is all new to me. Any help would be greatly appreciated.

<!DOCTYPE html>
<html>
<head>
<style>
.base {
    background: yellow;
    height: 330px;
    margin-left: 20px; 
    width: 220px;
    border: 0px;
    border-bottom: 0px;
    display: inline-block;
    position: relative;
}
.base::before {
    border-top: 25px solid yellow;
    border-left: 110px solid transparent;
    border-right: 110px solid transparent;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    bottom: -25px;
    width: 0;
}

.rectangle {
  background: blue;
  height: 310px;
  margin-top: 10px;
  margin-left: 10px;
  width: 200px;
  border: 0px;
  border-bottom: 0px;
  display: inline-block;
  position: relative;
}
.rectangle::before {
  border-top: 25px solid blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  bottom: -25px;
  width: 0;
}

.title {
  font-family: fantasy;
  font-size: 30px;
  text-align: center;
  margin-top: 10px;
  color: yellow;
  font-weight: bold;
  text-shadow: 2px 2px 8px #000000;
}

      .no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: white;
}

img {
 object-fit: fill;
 width: 55px;
 height: 55px;
}

</style>
</head>
<body>
<div class="base">
  <div class="rectangle">
      <div class="title">
        VOLLEYBALL
        <br>
          <ul class="no-bullets">
            <li>1984 Beach</li>
            <li>1989 Modified</li>
            <li>1999 Unified</li>
            <li>2000 Modified</li>
            <li>2010 D-I Unified</li>
            <li>2011 D-I Unified</li>
            <li>2015 D-I Unified</li>
            <li>2016 D-I Unified</li>
            <li>2017 D-II Unified</li>
            <li>2018 D-I Traditional</li>
            <li>2019 D-1 Unified</li>
            <li>2019 D-1 Traditional</li>
          </ul>
            <img src="https://i.pinimg.com/originals/33/6c/d8/336cd82c98e12b68c13cb2cb43ed25d7.png">
      </div>
  </div>
</div>
  
</body>
</html>

Upvotes: 0

Views: 1036

Answers (2)

Ash Sharma
Ash Sharma

Reputation: 31

<!DOCTYPE html>
<html>
<head>
<style>
.base {
    background: yellow;
    height: 350px;
    margin-left: 20px; 
    width: 220px;
    border: 0px;
    border-bottom: 0px;
    display: inline-block;
    position: relative;
}
.base::before {
    border-top: 25px solid yellow;
    border-left: 110px solid transparent;
    border-right: 110px solid transparent;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    bottom: -25px;
    width: 0;
}

.rectangle {
  background: blue;
  height: 330px;
  margin-top: 10px;
  margin-left: 10px;
  width: 200px;
  border: 0px;
  border-bottom: 0px;
  display: inline-block;
  position: relative;
}
.rectangle::before {
  border-top: 25px solid blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  bottom: -25px;
  width: 0;
}

.title {
  font-family: fantasy;
  font-size: 30px;
  text-align: center;
  margin-top: 10px;
  color: yellow;
  font-weight: bold;
  text-shadow: 2px 2px 8px #000000;
}

      .no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: white;
}

img {
 object-fit: fill;
 width: 55px;
 height: 55px;
 margin-top:15px;
}

</style>
</head>
<body>
<div class="base">
  <div class="rectangle">
      <div class="title">
        VOLLEYBALL
        <br>
          <ul class="no-bullets">
            <li>1984 Beach</li>
            <li>1989 Modified</li>
            <li>1999 Unified</li>
            <li>2000 Modified</li>
            <li>2010 D-I Unified</li>
            <li>2011 D-I Unified</li>
            <li>2015 D-I Unified</li>
            <li>2016 D-I Unified</li>
            <li>2017 D-II Unified</li>
            <li>2018 D-I Traditional</li>
            <li>2019 D-1 Unified</li>
            <li>2019 D-1 Traditional</li>
          </ul>
            <img src="https://i.pinimg.com/originals/33/6c/d8/336cd82c98e12b68c13cb2cb43ed25d7.png">
      </div>
  </div>
</div>
  
</body>
</html>

increased the height of base and rectangle by 20px, margin on top of image: 10px..

Upvotes: 0

Real Quick
Real Quick

Reputation: 2810

Its being cut off because it doesn't fit its container. You can resize the two divs, resize the image or use position: absolute inside an img-container.

Here's where I put your image inside a container to retain the size of your volleyball image.

I put position: absolute and used transform to center your image.

<!DOCTYPE html>
<html>
<head>
<style>
.base {
    background: yellow;
    height: 330px;
    margin-left: 20px; 
    width: 220px;
    border: 0px;
    border-bottom: 0px;
    display: inline-block;
    position: relative;
}
.base::before {
    border-top: 25px solid yellow;
    border-left: 110px solid transparent;
    border-right: 110px solid transparent;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    bottom: -25px;
    width: 0;
}

.rectangle {
  background: blue;
  height: 310px;
  margin-top: 10px;
  margin-left: 10px;
  width: 200px;
  border: 0px;
  border-bottom: 0px;
  display: inline-block;
  position: relative;
}
.rectangle::before {
  border-top: 25px solid blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  bottom: -25px;
  width: 0;
}

.title {
  font-family: fantasy;
  font-size: 30px;
  text-align: center;
  margin-top: 10px;
  color: yellow;
  font-weight: bold;
  text-shadow: 2px 2px 8px #000000;
}

      .no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: white;
}

.img-container {
    margin: auto;
}

img {
 object-fit: fill;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 margin: auto;
 width: 55px;
 height: 55px;
}

</style>
</head>
<body>
<div class="base">
  <div class="rectangle">
      <div class="title">
        VOLLEYBALL
        <br>
          <ul class="no-bullets">
            <li>1984 Beach</li>
            <li>1989 Modified</li>
            <li>1999 Unified</li>
            <li>2000 Modified</li>
            <li>2010 D-I Unified</li>
            <li>2011 D-I Unified</li>
            <li>2015 D-I Unified</li>
            <li>2016 D-I Unified</li>
            <li>2017 D-II Unified</li>
            <li>2018 D-I Traditional</li>
            <li>2019 D-1 Unified</li>
            <li>2019 D-1 Traditional</li>
          </ul>
          <div class="img-container">
                <img src="https://i.pinimg.com/originals/33/6c/d8/336cd82c98e12b68c13cb2cb43ed25d7.png">
            </div>
      </div>
  </div>
</div>
  
</body>
</html>

Upvotes: 1

Related Questions