Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to fix the css red notification bubble

How to fix the css red notification bubble

Problem

I have a Html Like follows which I created using twitter bootstrap.

I am trying to create a Red Notification Bubble on the eye icon but its not looking so good.

My css for notification Bubble.

.noti_Container {
position: relative;
/* This is just to show you where the container ends */
width: 16px;
height: 16px;
cursor: pointer;
  }

  .noti_bubble {
position: absolute;
top: 2px;
right: 10px;
background-color: red;
color: white;
font-weight: bold;
font-size: 14px;
border-radius: 2px;
}

What i wanted is like hide the small arrow created by bootstrap with the red bubble and when the number increase in the bubble the bubble size must increase right side. Currently its increasing on left side so if the number inside the bubble is 100 for example so the whole eye icon becomes hidden with the bubble.

enter image description here

Problem courtesy of: Saurabh Kumar

Solution

Position your badge with left instead of right:

.noti_bubble {
    position: absolute;
    top: 2px;

    /* this will anchor your badge from its left-hand edge at the midpoint of your icon */
    left: 8px;

    background-color: red;
    color: white;
    font-weight: bold;
    font-size: 14px;
    border-radius: 2px;
}
Solution courtesy of: André Dion

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to fix the css red notification bubble

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×