Sent by Kevin Rodenhofer on 30 June 2009 22:10
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
> [EMAIL-REMOVED] [EMAIL-REMOVED]>> 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 [EMAIL-REMOVED]
[EMAIL-REMOVED]>
>>
>>> 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 [EMAIL-REMOVED]>
[EMAIL-REMOVED]> 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 [EMAIL-REMOVED] [EMAIL-REMOVED]>]
>>>> 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 [EMAIL-REMOVED] [EMAIL-REMOVED]>]
>>> 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 [EMAIL-REMOVED] [EMAIL-REMOVED]>]
>> 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 [EMAIL-REMOVED]]
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/
