Stephanie Leary wrote:
>Thanks, Ingo. I'm sure this will start making sense after a couple more
>aspirin...
>
>
Hi Stephanie,
Good news: you can forget the aspirin, and even no coffee needed! ;-)
After some days of scratchin' my head I got the "aha!" for the simple
css solution that I was feeling to be present.
First: we forget the background-image to be shifted left or right with a
certain %.
Second: then we can forget the exact computing of it in px (by hand or
by javascript).
Third: a background-position in a % has its own rules, as Ingo
explained. - But a simple <p> we can give a width of a % of the
containing element, no px needed.
So we can style a <p> line with a content of the % number ... as
inline-block with that % as width.
We give this <p> a background-color ... and: ready! :-)
* Here is the example
<http://home.tiscali.nl/developerscorner/css-discuss/test-progress-test_a.htm>
And now we have made this, we can add a background-img to this <p> which
has already the % width (the background cannot peep out of this width).
For instance the well known Windows progress blocks:
* Example 2
<http://home.tiscali.nl/developerscorner/css-discuss/test-progress-test_b.htm>
Or you can make your own variants (free to choose aligned left or
aligned right):
* Example 3
<http://home.tiscali.nl/developerscorner/css-discuss/test-progress-test_c.htm>
* Example 4
<http://home.tiscali.nl/developerscorner/css-discuss/test-progress-test_d.htm>
I think in this way (% as inline-style!) it's easy to adapt the page
every now and then with the actual data
- without calculator, without javascript, and without much chance to
make errors (the % has to be put in the html twice, but just in the same
line: easy to change).
The only beauty error is in IE: at small %%, IE is extending the width
(as usual for IE) of the <p>-background to the width of the text inside.
At about 14% or 15% the % is exactly the indicated % of the width of the
bar. But assuming this progress bar is not for scientific purposes,
there is no need to fix IE, and I guess everybody can live and/or sleep
with it.
Whishing you good days [1],
francky
[1]
Time to read Ingo's story and links at ease, without aspirine. ;-)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
