That's a good idea, although using 1px images for spacing again seems to
smack of bad practices.
Or does it? Lately I've begun to doubt my instincts in this area. With
this particular problem, I'm
getting the impression that there's no one, true answer yet. I'm either
using gifs for spacing or I'm
putting <a> tags around floated block-level <div> or a <li> tags. I think
"display:inline-block" might
be useful, but again, from what I've read, "display: inline-block" does not
behave uniformly across
all browsers, including the still widely used IE7.
I think I will just have to choose from among the least of several evils.
Right now I'm leaning toward
floated <div>s.
On Tue, Jun 30, 2009 at 1:01 PM, Kevin Rodenhofer <ke...@rodenhofer.com>wrote:
> Keeping this simple, why not just create a 1 pixel solid color image, one
> for each color (red/white, etc...) then set height to the appropriate
> height, and the widths can be set incrementally as you make progress toward
> your goal?
>
> This could probably be automated with a DB and some simple server-side
> code, but that's not for this list.
>
>
> Noel Taylor wrote:
>
> Isn't making the spans "display: block" the same as just using divs? And
> therefore
> also in violation of the rule about "no anchor tags around block-level
> elements" ?
>
> On Tue, Jun 30, 2009 at 12:34 PM, Alexander Wallace <alexmlwall...@gmail.com
>
> wrote:
>
>
> You should give your spans { display: block; }.
> Alternatively, you could use the original divs, but use links inside
> the divs with { display: block; }
>
> -Alex
>
> On Tue, Jun 30, 2009 at 1:25 PM, Noel Taylor <noelta...@gmail.com>
> <noelta...@gmail.com> wrote:
>
>
>
> Dear css-d gurus:
>
> I want to make a box that shows the progress that a non-profit has made
> toward a
> certain fund-raising goal. It should look something like:
>
> ||XXXXXXXX|| ||
>
> That is, the box should be sub-divided into two boxes: one with a colored
> background
> to show the progress toward the goal, and one with a white background
> representing
> the percent left to go. Furthermore, the entire box should be insde
>
>
> anchor
>
>
> tags so that
> it links to another page explaining more about the project.
>
> The problem is that if I do this:
>
> <div id="container" style="height: 20px; width: 170px; border: 1px solid
> black">
> <a href="other_page.html">
> <div id="completed" style="height: 20px; width: 38%; background-color:
> green; float: left"></div>
> <div id="remaining" style="height: 20px; width: 62%; background-color:
> white; float: left"></div>
> </a>
> </div>
>
> then I'm violating a rule that says you're not supposed to put anchor
>
>
> tags
>
>
> around block-
> level elements, and I'm also using floats in a sketchy way. However, if
>
>
> I
>
>
> do this:
>
> <div id="container" style="height: 20px; width: 170px; border: 1px solid
> black">
> <a href="other_page.html">
> <span id="completed" style="width: 38%; background-color: green"></span>
> <span id="remaining" style="width: 62%; background-color: white"></span>
> </a>
> </div>
>
> then I don't get anything because spans are only as wide as the content
> inside them,
> and the "width" attribute is ignored.
>
> Is there a canonical way to do this? Barring that, does anyone know a
>
>
> good
>
>
> way?
> ______________________________________________________________________
> css-discuss
> [cs...@lists.css-discuss.org]http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> ______________________________________________________________________
> css-discuss
> [cs...@lists.css-discuss.org]http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> ______________________________________________________________________
> css-discuss
> [cs...@lists.css-discuss.org]http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>
>
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
