Sent by Ingo Chao on 19 December 2006 18:06
Stephanie Leary wrote:
> Ran into a bizarre problem over the weekend. The goal of this page is to
> combine a nav menu with progress meters for a funding campaign. After much
> fiddling with stacking things, I realized the simplest way to do it would be
> to set a background image on each list item, and move it to the left by
> whatever amount has not been funded.
>
> Example:
> http://stephanieleary.net/progress-test/
>
> For goal #10, I tried
> background-position: -76% 50%;
>
> ...but it doesn't work. If I do the math and specify the pixels, it does:
> background-position: -152px 50%;
>
> (Actually, that doesn't work in Safari either, but I'm willing to deal with
> Safari later.)
>
> Why won't the percentage work?
>
>
Image and box are approx. 200px wide in your example.
As per CSS spec, the percentage does not move the left top corner:
"With a value pair of '14% 84%', the point 14% across and 84% down the
image is to be placed at the point 14% across and 84% down the padding
area."
This means, percentage bg positioning uses two corresponding points, a
point in the img and a point in the box, and matches them.
See fig1 in Zoe's article [1].
As long as your image is as wide as the box, no percentage value should
move it, since the position of any percentage-related point is the same.
If both are 200px wide, 50% means: the middle of the img is matched to
the middle of the box: no move.
0%: no move. -76%: no move.
Because both are equal in width.
With percentages, you can move a smaller or an wider image in relation
to the box.
To cover 100% of the box with the image: The image should have a width
of 400px, and the half of it should get the color [+], the other half
should be white [=].
img: 0%++++====100% 400px
box: 0%####100% 200px
turned by -90° here
imgpos:0%, boxcovered:100%
=
=
=
=
+#
+#
+#
+#_0%
pos 25%, covered 75%
=
=
=
=#
+#
+#_25%
+#
+
pos 50%, covered 50%
=
=
=#
=#_50%
+#
+#
+
+
pos 75%, covered 25%
=
=#_75%
=#
=#
+#
+
+
+
Or is it the other way round? Hmm.
And Safari will probably have
problems with %-positioning bg-images that are bigger than the box anyway.
Ingo
[1] http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58
--
http://www.satzansatz.de/css.html
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/