I’m attempting to place a ‘notification’ style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge
. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
3
Answers
Here’s a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the
notify-badge
span into a div. I saw no reason it had to be a span.I changed the position to relative. Edit – you could actually keep the attribute
position: absolute;
provided you know what you’re doing with it. Guy in the comments was right.You had the attribute
right: 1.5rem;
and I simply changed it toleft
because it was being inset in the opposite direction of your example.You can tweak it further but in a vacuum this is what you want.
The idea here is to overlay an absolute container on top of a relative one. Here’s a similar example:
The CSS:
This is going to put our text right up on top of the image nicely, but it doesn’t accomplish the box we want to achieve behind the text. For that, we can’t use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
Then use that span to style and text:
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Bunch of different ways you can accomplish this. This should get you started:
Addendum (from the Asker @user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding
margin-top:-20px;
to.item
fixed the alignment issue.