I'm struggling to align an image with a number that updates on page load. I want the number to either be on top of the image or in the northeast corner (top right), but so far I can't get it to line up correctly. The best I've achieved is having them spaced apart to the right.
I've checked out examples on Stack Overflow: CSS : Float a number value on the right top corner of an image How to put the number at top right corner of cart icon?
Here's what I have based on the second link above: https://i.sstatic.net/ZrAAs.png
This is my current HTML code:
<li class="nav-item">
<i class="fa fa-shopping-cart"></i>
<a href="Cart1.aspx" class="icon-shopping-cart" style="font-size: 25px">
<label ID="lblCartCount" ForeColor="White"/><img alt="basket" height="30" src="images/basket.png" />3</a>
</li>
Styles:
<style>
.header{background:rgb(0, 178, 255);color:#fff;}
#lblCartCount {
font-size: 12px;
background: #ff0000;
color: #fff;
padding: 0 5px;
vertical-align: top;
}
.bell {
display: inline-block;
position: relative;
width:64px;
}
.bellnumbers {
position: absolute;
font-size:12px;
background-color:red;
width:14px;
height:14px;
color:#fff;
top: -4px;
right: -4px;
}
.badge {
padding-left: 9px;
padding-right: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.label-warning[href],
.badge-warning[href] {
background-color: #c67605;
}
#lblCartCount {
font-size: 12px;
background: #ff0000;
color: #fff;
padding: 0 5px;
vertical-align: top;
margin-left: -10px;
}
</style>
I prefer the transparent number color over a solid background color like in the first example.
I also tried this approach before:
<li class="nav-item">
<div class="cart update">
<a class="nav-link" id="cart-link" th:href="@{/cart}" ><img alt="basket" height="30" src="images/basket.png" />
<span class="badge badge-warning" id="lblCartCount"><i class="fa" style="font-size:12px">[[${cartItemsSize}]]</i></span></a>
</div>
</li>