Got a link that got a span, inside that span I will from jquery add a number of news. But I want it to be smaller and with a bit of padding so it looks like a notification on a app?

This is the code I got:

<a id="menyNavOptions" href="nyheter.php" >Nyheter<span style="margin-bottom: 30px; font-size: 0.8em;font-weight:bolder ; color: #ff0000!important; line-height:0.3em;" id="outPost"></span></a>

So the look I am going for is a Link with a number on the top right corner

Thanks

Got a link that got a span, inside that span I will from jquery add a number of news. But I want it to be smaller and with a bit of padding so it looks like a notification on a app?

This is the code I got:

<a id="menyNavOptions" href="nyheter.php" >Nyheter<span style="margin-bottom: 30px; font-size: 0.8em;font-weight:bolder ; color: #ff0000!important; line-height:0.3em;" id="outPost"></span></a>

So the look I am going for is a Link with a number on the top right corner

Thanks

• javascript
• jquery
• css
• html

Share Improve this question Follow asked Dec 2, 2013 at 18:32 Christoffer JacobsenChristoffer Jacobsen 1,25133 gold badges1414 silver badges1414 bronze badges 1

• can you explain more it looks like a notification on a app with an image or something else – DaniP Commented Dec 2, 2013 at 18:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

display:block won't help, because it will have the full width (100%). Use display:inline-block;

http://jsfiddle/M5TKv/

But I'm not sure if Padding bottom will do what you want.

I think you want to do this:
http://jsfiddle/M5TKv/1/

Try add display:inline-block in the CSS and it should behave as you expect :)

But I would rather use position relative on the link and position absolute on the span.

.linkclass {
    position: relative;
}
.spanclass {
    position: absolute;
    top: -10px;
    right: 0;
}

Add display: inline-block; float: right;