XSL / Width Assistance

[ledkin]

I'm currently developing XML/XSL to display a row of divs. The number of divs will differ each time and I want them to always be in the same row. Each div represents % of use, so it's essentially 1 div that contains 2 divs. A colored one on the left that takes up the % of use for that item, and a plain white div on the right to fill up the remaining unused time.

My xml looks something like:

<item>
 <usage>50</usage>
</item>
<item>
 <usage>75</usage>
</item>

and so on.

So I would like my xsl to take these 2 items, create side to side divs. The first div would contain 2 divs of equal width, the second would contain 2 divs with the first taking up 75% and the 2nd 25%.

My question is: Can I use XSL to tell these divs what their width should be? I can use the value of to get the usage number (percentage), but I'm not sure how to make that be the div width.

<xsl:template match="/item">
 <div style="width:100px">
  <div style="width:?%">  
  </div>
  <div style="width:?%">  
  </div>
 </div>
</xsl:template>

I'm not sure what to put in the ? areas. Or if there's a different way to do it. I know I can get the usage by this:

<xsl:value-of select="/item/usage" />

I just don't know how to inject it into the width!

Any help would be appreciated! Thanks for helping this xml/xsl newb!

[httpwebwitch]

use the width attribute instead of the style property

[ledkin]

Can you provide an example?

<xsl:variable name="barWidth" select="100" />
<div class="bar" width="{$barWidth}">
  <xsl:value-of select="usage" />
</div>

Produces the html

<div class="bar" width="100">0</div>

But the divs are not taking up 100px. They just take up enough room to print the value, which in this case is 0.

Any other guidance? Thanks

[ledkin]

also...

<div class="bar">
<xsl:attribute name="width">
<xsl:value-of select="$barWidth" />
</xsl:attribute>
<xsl:value-of select="usage" />
</div>

produces the same html as above, but it is not taking up the specified width...

[httpwebwitch]

my CSS bad. that tactic might have worked with an <img>

try:
<div class='bar'>
<xsl:attribute name="style">
<xsl:text>width:</xsl:text>
<xsl:value-of select="$barWidth" />
<xsl:text>px;</xsl:text>
</xsl:attribute>
<xsl:value-of select="usage"/>
</div>

I didn't test that, just trying to show that you can put a <xsl:text> into the attribute, and build the style CSS string with variables injected into it.

[httpwebwitch]

oh by the way,
welcome to WebmasterWorld!