Geek asks and answers

Create a notification icon with the number of notifications

I want to make a notification icon on my website like facebook. Facebook shows a notification icon in the upper left corner. There are several notifications on the facebook next to the icon. I want to do the same. I want to show the number of notifications next to the notification icon, just like on facebook. I created the code for this:

<style>
    .icon {
        width:30px; 
        height:30px;
    }
    .txt {
        padding:-10px 0 0 10px;
        background:red; 
        font-size:xx-small;
    }
</style>

<div class="icon">
    <img src="icon.bmp" alt="none" width="100%" height="100%" />
    <div class="txt">10</div>
</div>

But this does not happen. Please help me how can I do this the same as on facebook. Thank.

+5
source share
1 answer

Just use position: relative;for icon and position: absolute;for text. Determine the distance to the icon with topand left.

.icon {
    width:30px; 
    height:30px;
    position: relative;
}
.txt{
    background:red; 
    font-size:xx-small;
    position: absolute;
    top: 5px;
    left: 5px;
}

.icon css img.

+8

More articles:


All Articles