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> 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/

Reply via email to