Vertical Progress bar

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
J0kerz
Forum Commoner
Posts: 37
Joined: Fri May 29, 2009 2:51 pm

Vertical Progress bar

Post by J0kerz »

Hey guys,

I am trying to create a vertical progress bar using CSS.

I am using width/height of the image in % to set the value of the progress bar.

I want my vertical progress bar to start at the bottom but CSS set up my height starting point at the top.

My problem in image:
Image

Is there anyway to set the height starting point at the bottom?

Thanks for your time!
J0kerz
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: Vertical Progress bar

Post by John Cartwright »

Hard to help without seeing your code.
eivind
Forum Commoner
Posts: 28
Joined: Tue Apr 19, 2011 7:57 am

Re: Vertical Progress bar

Post by eivind »

I think css sprite should do the trick: http://tinyurl.com/3szgjh5
darek
Forum Newbie
Posts: 8
Joined: Tue Apr 19, 2011 2:26 am
Location: Opole, Poland

Re: Vertical Progress bar

Post by darek »

This is quite simple thing, and I really don't see how css sprites could help in this - it will make things radiculously hard. But to the point: add this style to your vertical bar:

position: absolute; left: 0; bottom: 0;

bottom: 0 means that your bar will be positioned starting from bottom of parent div. Oh, and remember to add position: relative to parent div. Simple as that.
eivind
Forum Commoner
Posts: 28
Joined: Tue Apr 19, 2011 7:57 am

Re: Vertical Progress bar

Post by eivind »

I'm glad there are some that knows CSS better than me :)
Post Reply