Creating a customized notification icon featuring a count of notifications

I am trying to add a notification icon to my website similar to Facebook. On Facebook, the notification icon is displayed in the top left corner with a number indicating the total notifications. I would like to replicate this feature on my site as well. Below is the code that I have written for this purpose:

<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>

Unfortunately, the desired effect is not being achieved. Can anyone offer assistance on how to properly implement this feature to match the style of Facebook? Thank you.

htmlcss

Answer №1

To display the icon correctly, you can set position: relative; for the icon and position: absolute; for the text. Use top and left to adjust the position of the text relative to the icon.

.icon {
    width:30px; 
    height:30px;
    position: relative;
}
.txt{
    background-color:red;
    font-size:xx-small;
    position: absolute;
    padding:2px;
    top: 5px;
    left: 5px;
    border-radius: 25px;
}
<div class="icon">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" alt="none" width="100%" height="100%" />
    <div class="txt">10</div>
</div>

You can also set the icon as a background image of .icon using CSS and eliminate the need for the img tag altogether.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the Benefits of jQuery History Plugin, Optimizing with Google Sitemap and

Despite searching online, I have yet to find a precise solution to my query. On my index.php page, there are two specific DIV's: #post-title and #post-content, whose content is dynamically loaded through a jQuery function triggered by clicking a link ...

javascriptjqueryhtmlajaxseo

Using JQuery to call a PHP file and verify a unique identifier

I've been attempting to use this tutorial to check the availability of certain IDs while a user fills out forms. However, I'm working with PostgreSQL instead of MySQL and seem to be encountering issues with my PHP file. There seems to be a small ...

phpjqueryhtmlajaxpostgresql

Using JQuery to Enhance the Highlight Effect: Tips and Tricks

Exploring the functionality of the "highlight" JQuery effect: http://docs.jquery.com/UI/Effects/Highlight You have the ability to modify the background color of any DIV element with a fade in/out effect. However, the provided example demonstrates trigge ...

javascriptjqueryhtmljquery-ui

Tips for centering a video vertically within a cell

I need assistance with aligning a video in the center of a fixed height cell while hiding the overflow at the top and bottom. Here is what I have so far: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height ...

htmlcsshtml5-video

Is it possible to create an input field exclusively for tags using only CSS?

I am currently facing some limitations with a website I am managing. Unfortunately, I do not have the ability to incorporate additional libraries such as custom jQuery or JavaScript scripts. My goal is to customize an input field for tags so that when us ...

javascriptjqueryhtmlcsstags

Display a single item using Jquery when clicking on an element with the same class

I'm relatively new to JQuery/Javascript scripting and I'm having some difficulty. How can I display one item with the same class without affecting the other items? Here is my code: $(function() { $('.embedContainer > .myPosterImage& ...

javascripthtmljquerycssscripting

What is the best way to arrange the elements vertically within a flex container?

In my current code snippet, I have the following setup: <section class="body1"> <h1 class="text1">Tours around the world</h1> <h3 class="text1">Great experiences</h3> <form action="/respuestaUsuario/"> ...

htmlcssflexbox

Altering an element's visibility from 'none' will trigger its animation to play once again

Take a look at the snippet below and you'll see that the sliding animation plays twice - once when the .addClass statement runs, and again when #test's display is switched to 'initial' (timeouts are in place to help visualize the issue) ...

jqueryhtmlcssanimation

Using JavaScript drag and drop feature to remove the dragged element after a successful drop operation

Trying to figure out how to remove a dragged element from the DOM after a successful drop using the native JavaScript drag and drop API. After attempting to listen for the drop event, it seems that it only fires on the element being dropped onto and does ...

javascripthtmldrag-and-drop

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

Within my design, I have several rows with 3 columns each. Every column contains a main content section labeled SavedSearchBox-content (with various permutations that affect its height) and a footer labeled SavedSearchBox-footer. To structure this layout, ...

htmlcssflexbox

Using HTML5 chunks and web workers will not involve any uploading of files

I encountered an issue while working with html5 slice and webworker. It seems that when I try to upload a file using the uploadFile function, nothing is happening and the file is not being uploaded. <html> <head> <title>Uploa ...

phpjavascripthtmlfileweb-worker

:root variables not being recognized in SCSS and Vue3 with Vite

I am encountering an issue with setting variables in my root SCSS file, as they are not being recognized correctly. Within my Vite configuration, I have included the following to import my styling: css: { preprocessorOptions: { scss: { additio ...

cssvue.jssassvuejs3vite

Why is my HTML image stored in the database not showing up in TCPDF?

Currently, my situation involves using TCPDF to retrieve content from a MySQL table row that contains HTML code like this: <p><a href="x.html"><img src="http://1/2/3/x.jpg" width="x" height="x"></a></p> The problem arises wh ...

phpmysqlhtmltcpdf

Is there a way to generate PDF files from rrdcgi output?

I have developed an rrdcgi script to showcase system performance data through graphs. I am now seeking a way to allow users to generate PDFs on the spot, containing the current page's images and information along with header and footer details. Additi ...

htmlperlrrdtool

Using jQuery Datepicker, showcase two distinct datepickers on a single page

Currently, I am utilizing the jQuery [Datepicker][1] on a website, but I am facing challenges when attempting to display two datepickers on the same page in different manners. The first one should only appear once you click the text box, and once a date i ...

javascriptjqueryhtmlwebdatepicker

The width of Highcharts increases proportionally to the growth of the chart's width

I want to create a highcharts graph where the width increases as data points increase. Currently, I have: I am using vuejs with highcharts, but it should work similarly with jquery or other frameworks. <div class="col-md-6" style= ...

javascriptcsshighcharts

Issue with FusionCharts rendering correctly arises when the <base> tag is present in the HTML head section

Combining AngularJS and FusionCharts in my web application has led to a unique issue. The upcoming release of AngularJS v1.3.0 will require the presence of a <base> tag in the HTML head to resolve all relative links, regardless of the app's loca ...

javascripthtmlangularjsfusioncharts

Determine the presence of a value within a specific column of an HTML table using jquery

When I input an ID number into a textbox, it shows me the corresponding location on a scale in another textbox. You can see an example of this functionality in action on this jsFiddle: http://jsfiddle.net/JoaoFelipePego/SdBBy/310/ If I enter a User ID num ...

javascriptjqueryhtml

Steps to successfully implement onClick functionality in html within C# server side code

I'm having trouble with my onClick function. When I click, nothing happens and there are no errors to help me diagnose the issue. var data = new FormData(); data.append("cart_list", new_cart); $.ajax({ url: "@Url.Action ...

javascriptc#htmlasp.net-mvcserver-side

Add a style to every div except for the final one

I've attempted to add a unique style to all divs with the same class within a parent div, except for the last one. Strangely, my code doesn't seem to work as expected for this particular case. Can anyone spot what I might be overlooking? Right no ...

javascriptcssreactjs