CODEWITHSUNDEEP
xmlxsltxsd
user3002109
user3002109

Reputation: 33

Linking XML to XSL to CSS?

Ok this is a little confusing. Im not sure if its just me or if XSLT is much more limited to CSS because I cannot style half as well as I can in CSS.

At present, I have some XML data, which is linked to an XSL document. In my XSL document, I have an LI menu, and all my products from the XML which shows up perfectly fine. Problem is, I want to style my LI menu, so I have linked that to an external CSS style sheet. As soon as I link the XSL to the style sheet, everything drops out and it becomes a bunch of text.

Is this something thats not possible?

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform
<xsl:template match="/">
<html>
<head>
<style>
ul
{
float:left:
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:blue;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">VRM Checker</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
  <body>
  <h2>BMW X6 Available Parts</h2>
<table border="1">
  <tr bgcolor="#9acd32">
    <th>Products</th>
    <th>Description</th>
<th>Suitability</th>
<th>Caution</th>
<th>Price (In GBP)</th>
  </tr>
  <xsl:for-each select="catalog/cd">
  <tr>
    <td><xsl:value-of select="Products"/></td>
    <td><xsl:value-of select="Description"/></td>
    <td><xsl:value-of select="Suitability"/></td>
    <td><xsl:value-of select="Caution"/></td>
    <td><xsl:value-of select="Price"/></td>
<td><img src="{image}"></img></td>
</tr>
  </xsl:for-each>
</table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

XML

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="car.xsl"?>
<catalog>
<cd>
    <Products>X6 Front Bumper</Products>
    <Description>Stylized X6 Bumper from Hamman. Production and aero tested for agile performance and improved aerodynamics. Included are LED fittings and LED strips</Description>
    <Suitability>USA</Suitability>
    <Caution>Columbia</Caution>
    <Price>£106.90</Price>
<image><src>http://www.carid.com/images/aero-function/hood/108726-2.jpg</src></image>
</cd>
</catalog>

Upvotes: 0

Views: 878

Answers (2)

michael.hor257k
michael.hor257k

Reputation: 116957

Your XSLT stylesheet ("car.xsl") should look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="utf-8" indent="yes"/>

<xsl:template match="/">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">VRM Checker</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
<h2>BMW X6 Available Parts</h2>
<table>
    <thead>
        <tr>
            <th>Products</th>
            <th>Description</th>
            <th>Suitability</th>
            <th>Caution</th>
            <th>Price (In GBP)</th>
        </tr>
    </thead>
    <xsl:for-each select="catalog/cd">
        <tr>
            <td><xsl:value-of select="Products"/></td>
            <td><xsl:value-of select="Description"/></td>
            <td><xsl:value-of select="Suitability"/></td>
            <td><xsl:value-of select="Caution"/></td>
            <td><xsl:value-of select="Price"/></td>
            <td><img src="{image}"></img></td>
        </tr>
    </xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Then put all your "quality CSS styles" inside the "mystyle.css" document referenced in the XSLT stylesheet above.

Of course, you could place the CSS within the XSLT stylesheet itself, too - same as you would with an HTML document.

Upvotes: 0

declension
declension

Reputation: 4185

It sounds like you're a little confused about the roles of XSLT compared to CSS here.

XSLTs are a powerful general-purpose tool to take one form of XML and transform it into another, in this case probably XHTML (which is a form of XML).

The CSS is typically for styling of HTML only (though you can style the XML directly).

When you say "is linked to an XSL", I infer you're using a browser to do the transformation for you (rather than in a script / application).

Without source it's hard to diagnose anything, but I'm guessing by adding that CSS link you've invalidated the XSL transformation in some way (or just made it do nothing, so that the default rendering of the XML is used, hence a "bunch of text").

What you might want to do is ensure the CSS declaration appears in the correct part of the output of your XSLT i.e. in the <head> section of the generated XHTML.

Updated

Examining the source now, that XSLT is invalid XML:

  • The <xsl:stylesheet... doesn't seem to close the quotes and tag, but maybe that was a copy-paste issue
  • There are two <body> tags opened (an erroneous one before the <h2>).

Fixing these made it work for me...

Upvotes: 1

Related Questions