Question 43937 in Html Question posted in
Some basic documentation can be found here.

How to place a ribbon over text in a div – Html

I am trying to add ribbon over div of cards in my html page, but it is displacing the div below it. Could anyone help me on how to solve it?

The ribbon is displacing the first card and pushing it down.

.ribbon {
  background-color: #a00;
  position: relative;
  left: -0px;
  top: 40px;
  height: fit-content;
  transform: rotate(-45deg);
}

.ribbon p {
  color: #fff;
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px;
  padding: 1px 10px;
  text-align: center;
  text-decoration: none;
}
<div class="main">
  <ul class="cards">
    <div class="ribbon">
      <p>Best value pack</p>
    </div>

    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://via.placeholder.com/50"></div>
        <div class="card_content">
          <p class="card_text">Live sessions</p>
        </div>
      </div>
    </li>

    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://via.placeholder.com/50"></div>
        <div class="card_content">
          <p class="card_text">Job Assistance</p>

        </div>
      </div>
    </li>
  </ul>
</div>
Tags:

2

Answers


  1. 0

    try adding z-index on ribbon, like this:

      z-index: 5;
  background-color: #a00;
  position: relative;
  left: -0px;
  top: 40px;
  height: fit-content;
  
  /* for 45 deg rotation */
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
         
}
    Login or Signup to reply.
  2. 0

    Your list markup is invalid. A div is not a valid child of a list element. Fortunately we don’t want it in the list anyway. We’ll position it absolutely inside a shared container (which needs relative positioning to contain the ribbon). We can center it with the usual 50% tricks.

    Also, you don’t need vendor prefixes for transform. See https://caniuse.com/transforms2d.

    .main {
  position: relative;
}

.ribbon {
  position: absolute;
  background-color: #a00;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.ribbon p {
  color: #fff;
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px;
  padding: 1px 10px;
  text-align: center;
  text-decoration: none;
}
    <div class="main">
  <div class="ribbon">
    <p>Best value pack</p>
  </div>

  <ul class="cards">
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://via.placeholder.com/50"></div>
        <div class="card_content">
          <p class="card_text">Live sessions</p>
        </div>
      </div>
    </li>

    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://via.placeholder.com/50"></div>
        <div class="card_content">
          <p class="card_text">Job Assistance</p>
        </div>
      </div>
    </li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search