Question

56

Easiest CSS for red notification badge with count

rated 0 times [ 58] [ 2] / answers: 1 / hits: 114385 / 13 Years ago, thu, april 21, 2011, 12:00:00

I need to show the popular red notification indicator with count such as the one shown below. Getting something that looks nice cross browser seems tricky. For example, different browsers seem to treat paddings differently, resulting in weird looking notifications.

What is the best cross-browser way of ensuring the notifications show up nicely? Not adverse to using javascript, but pure css is of course preferable

enter

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

austynp

Add To Favorites

Follow

Total Points: 505

Total Questions: 118

Total Answers: 106

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

austynp questions

1 How to make puppeteer wait for page redirect from Cloudflare browser check?

Tue, Apr 20, 21, 00:00, 3 Years ago

1 Redux createAsyncThunk vs useEffect hook

Sun, Apr 11, 21, 00:00, 3 Years ago

1 How to type an object key in Typescript?

Sat, Feb 6, 21, 00:00, 3 Years ago

1 How do I send image data from a url using express?

Thu, Mar 19, 20, 00:00, 4 Years ago

1 Can I wait for a process to complete when consuming RabbitMQ messages with Node.js?

Mon, Mar 9, 20, 00:00, 4 Years ago

View All

answered 13 Years ago hayleevalenciac · Accepted Answer

The best way to achieve this is by using absolute positioning:

/* Create the blue navigation bar */

.navbar {

  background-color: #3b5998;

  font-size: 22px;

  padding: 5px 10px;

}



/* Define what each icon button should look like */

.button {

  color: white;

  display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */

  position: relative; /* All 'absolute'ly positioned elements are relative to this one */

  padding: 2px 5px; /* Add some padding so it looks nice */

}



/* Make the badge float in the top right corner of the button */

.button__badge {

  background-color: #fa3e3e;

  border-radius: 2px;

  color: white;

 

  padding: 1px 3px;

  font-size: 10px;

  

  position: absolute; /* Position the badge within the relatively positioned button */

  top: 0;

  right: 0;

}

<!-- Font Awesome is a great free icon font. -->

<link href=https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css rel=stylesheet/>



<div class=navbar>

  <div class=button>

    <i class=fa fa-globe></i>

    <span class=button__badge>2</span>

  </div>

  <div class=button>

    <i class=fa fa-comments></i>

    <span class=button__badge>4</span>

  </div>

</div>