954,604 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Numbered Icons

Hi guys I'm new to html and css and would like to know how to create something like the picture. Basically I need to create any image and add a number to the top right corner via a function. If there are examples please do share.

Note: this is not for iPhone.
Thanks

http://i.stack.imgur.com/RAi44.png

Vanquish39
Newbie Poster
16 posts since Dec 2010
Reputation Points: 10
Solved Threads: 0
 

Hello,
You will need a combination of CSS and javascript to do. CSS to display the base image in the right location (i.e. top right but with no text included) and the javascript to accept the number and place it over the image.
The easiest solution is probably a single div with the image of the bubble set as the background image. Inside that you can write your number using a basic javascript function.

hericles
Practically a Posting Shark
823 posts since Nov 2007
Reputation Points: 136
Solved Threads: 169
 

How about trying to do it by using ordered list()?

lps
Junior Poster
117 posts since Jul 2011
Reputation Points: 13
Solved Threads: 22
 

What does the number represent?
Is it a count of something the user is doing? Or is it the step in a process that the user has reached?

drjohn
Posting Pro in Training
448 posts since Mar 2010
Reputation Points: 76
Solved Threads: 80
 

Hi guys I'm new to html and css and would like to know how to create something like the picture. Basically I need to create any image and add a number to the top right corner via a function. If there are examples please do share.

Note: this is not for iPhone. Thanks

http://i.stack.imgur.com/RAi44.png

okay i will only tell you what i know. If is a count then Your CSS must have this

<ol>
<li>item 1</li>
<li>item 2</li>
</ol?
Commando112
Newbie Poster
5 posts since Feb 2012
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You