What I meant was not to use the images as spacers, but use the images as images...
See an example at this link: http://www.rodenhofer.com/progressbar/ Noel Taylor wrote: > 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 <mailto: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 <mailto: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> >>> <mailto: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 >>>> <mailto:css-d@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://evolt.org/> -- >>>> http://www.evolt.org/help_support_evolt/ >>>> >>>> >>> ______________________________________________________________________ >>> css-discuss [cs...@lists.css-discuss.org >>> <mailto:css-d@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://evolt.org/> -- >>> http://www.evolt.org/help_support_evolt/ >>> >>> >> ______________________________________________________________________ >> css-discuss [cs...@lists.css-discuss.org >> <mailto:css-d@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://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/