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/

Reply via email to