CODEWITHSUNDEEP
htmlcssxmlxsltxslt-1.0
Francesco Irrera
Francesco Irrera

Reputation: 473

Using external CSS into XSLTransformation 1.0

I am converting XML file using XSLT 1.0 in a Microsoft Word file.

This is my XSLT 1.0:

<xsl:when test="not(following-sibling::VICINITY)">
   <xsl:value-of select="following-sibling::ITA_LIGHT_NAME"/>
   <xsl:text>....................</xsl:text>                                       
   <br/>
</xsl:when>

This give this output: (I want that dotted line arrive at the end of column)

enter image description here

I am looking this link: http://jsfiddle.net/westy808/g0d8x8c5/1/ it contains:

HTML

<ul class="leaders">
    <li><span>Item</span><span>12.234</span></li>
    <li><span>Another Item</span><span>1,000.25</span></li>
</ul>

CSS

ul.leaders li { clear: both; }

ul.leaders li span:first-child {
    float: left;
    padding: 0 .4em 0 0;
    margin: 0;
}
ul.leaders li span + span {
    float: right;
    padding: 0 0 0 .4em;
    margin: 0;
}

ul.leaders li:after {
    content: "";
    display: block;
    overflow: hidden;
    height: 1em;
    border-bottom: 1px dotted;
}

OUTPUT

Item.........................12.234
Another Item1..............1,000.25

and this link: http://www.w3.org/Style/Examples/007/leaders.en.html, suggested by Kevin Brown.

Now at using the same method, I create this:

LEADER.CSS

ITA_LIGHT_NAME li { clear: both; }

ITA_LIGHT_NAME li span:first-child {
    float: left;
    padding: 0 .4em 0 0;
    margin: 0;
}
ITA_LIGHT_NAME li span + span {
    float: right;
    padding: 0 0 0 .4em;
    margin: 0;
}
ITA_LIGHT_NAME li:after {
    content: "";
    display: block;
    overflow: hidden;
    height: 1em;
    border-bottom: 1px dotted;
}

This is my XSLT 1.0:

<td>
<xsl:when test="not(following-sibling::VICINITY)">
   <link rel="stylesheet" type="text/css" href="css/leaders.css" />
       <style>
           <ul class="ITA_LIGHT_NAME">
               <li>
                   <span>
                        <xsl:value-of select="following-sibling::ITA_LIGHT_NAME"/>
                   </span>
              </li>
           </ul>
       </style>
</xsl:when>
</td>

But it dont run correctly.

This is my current output:

enter image description here

I want that dotted line arrive at the end of first column:

enter image description here

Thiu can help, to the solution http://bytes.com/topic/net/answers/85213-reference-external-css-js-xsl-stylesheet

Upvotes: 0

Views: 98

Answers (1)

Francesco Irrera
Francesco Irrera

Reputation: 473

This is near the solution: (is necessary a revision by CSS expert)

In your XSLT file insert....

<xsl:template match="/">
    <html>
        <head>
            <style type="css">
                .ITA_LIGHT_NAME { border-bottom: 5px dotted; } 
            </style>
        </head>
        <body>
        ...
        ...
        ...
        ...
        ...
        <xsl:when test="not(following-sibling::VICINITY)">
            <div class="ITA_LIGHT_NAME">
                <xsl:value-of select="following-sibling::ITA_LIGHT_NAME"/>
            </div>
        </xsl:when>
        ...
        ...

Now my output is the following:

enter image description here

Thi is not a perfect result, but now that we are able to insert CSS file into XSLT, studing CSS structure we can solve this problem in order to have a perfect pagination of our table.

I remember that our perfect pagination is the following:

enter image description here

NB: CAPO TORRE DI CAVALLO............... (this is perfect, until the end of first column)

This link can give you further notice: http://itins4.madisoncollege.edu/IT/152121advweb/XMLExamples/unit1/css/cssxslt/cust16.xsl

Upvotes: 1

Related Questions