HTML image won't link to page - html

Question

Having a kind of silly issue where my HTML image won't link to the page and doesn't show up as clickable. I have a cart and icon of a cart that displays the number of items in the cart. The image is included in the CSS. I tried setting the z-index all the way up but nothing happened. Not sure if I'm missing something obvious. Fairly new to this so any help is appreciated! Below is my Code:
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
}
<li>
<div class="cart">
</div>
<div id="quantityCount">0</div>
</li>

Answer 1

The link is an inline element by default and - having no content - occupies only very little space inside its container (if any). To change that make it a block element with the full size of its container:
.cart a {
display: block;
width: 100%;
height: 100%;
}

Answer 2

Your tag doesn't have any value, So that it can be made clickable.
You can use it like below:
<li>
<div class="cart">cart</div>
< id="quantityCount">0</div>
</li>
Otherwise if you want to show the count as clicable
<li>
<div class="cart"><span id="quantityCount">0</span></div>
</li>

Answer 3

Try these codes:
background-image: url(../images/shoppingcart.png);

Answer 4

well make sure the anchor tag inside card have same widht and height
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
position: relative;
}
.cart a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
z-index: 10;
}

Answer 5

make your <a> tag a parent of the <div class="cart"> tag. otherwise, your code works fine for me. perhaps the path to your image is incorrect? i replaced your image path with a hosted image and everything worked fine

Answer 6

It's a fundemental issue. You added a link but with no content (nothing between the tags).
Because of that the link also has nothing that will be shown and therefor uses up no space. Because of that, you cant click it.
The right structuring for that is, to put the div between the tag and the entire div will be a button for the link.
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
}
<li>
<a href="/homework_6/cart.html">
<div class="cart">
<id="quantityCount">0</div>
</div>
</a>
</li>

Answer 7

Wrap a link (a href tag) around your icon. Check out this example where I used Font-Awesome's shopping cart icon. see all of code here: https://codepen.io/susanwinters/pen/qBNYdBG
<h1>Shopping Cart Icon</h1>
<p>Go ahead and click the shopping cart icon:
<a href="https://teespring.com/stores/campsitecoders" target="_blank" />
<i class="fa fa-shopping-cart fa-3x"></i><span>5</span>
</a></p>