Page 1 of 1

Vertical Progress bar

Posted: Sat Mar 26, 2011 2:30 pm
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

Re: Vertical Progress bar

Posted: Sat Mar 26, 2011 2:33 pm
by John Cartwright
Hard to help without seeing your code.

Re: Vertical Progress bar

Posted: Thu Apr 21, 2011 3:07 am
by eivind
I think css sprite should do the trick: http://tinyurl.com/3szgjh5

Re: Vertical Progress bar

Posted: Thu Apr 21, 2011 8:12 am
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.

Re: Vertical Progress bar

Posted: Thu Apr 21, 2011 10:37 am
by eivind
I'm glad there are some that knows CSS better than me :)