I have the following XSL, XML and CSS:
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://ift.tt/tCZ8VR">
<xsl:output method="xml" omit-xml-declaration="yes" indent="yes" />
<!-- Indentation. HTML output beautifier-->
<xsl:strip-space elements="*"/>
<xsl:template match="/">
<xsl:copy-of select="."/>
</xsl:template>
<xsl:template match="/">
<html>
<head>
<title><xsl:value-of select="doc/page/name"/></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<xsl:for-each select="doc/item">
<div class="item">
<xsl:apply-templates/>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
<!-- XML <value> -->
<xsl:template match="doc/item/section/row">
<p>
<xsl:for-each select="value">
<xsl:value-of select="."/><br />
</xsl:for-each>
</p>
</xsl:template>
<!-- XML <section name> -->
<xsl:template match="doc/item/section/name">
<p><strong><xsl:value-of select="."/></strong></p>
</xsl:template>
<!-- XML <item name> -->
<xsl:template match="doc/item/name">
<p><strong><xsl:value-of select="."/></strong></p>
</xsl:template>
</xsl:stylesheet>
XML:
<?xml version="1.0" encoding="utf-8"?>
<doc>
<page>
<name>GoPro</name>
</page>
<item>
<name>GoPro Hero 4 Black</name>
<section>
<name>Video resolution</name>
<row>
<value>4K</value>
<value>30, 25, 24</value>
<value>Ultra wide</value>
<value>3840x2160</value>
<note></note>
</row>
<row>
<value>4K Superview</value>
<value>24</value>
<value>Ultra wide</value>
<value>3840x2160</value>
<note></note>
</row>
<row>
<value>WVGA</value>
<value>240</value>
<value>Ultra wide</value>
<value>848x480</value>
<note></note>
</row>
</section>
<section>
<name>Video format</name>
<row>
<value>H.264 codec, .MP4 file format</value>
<note></note>
</row>
</section>
<section>
<name>Weight</name>
<row>
<value>88g (3.1oz)</value>
<value>With housing: 152g (5.4oz)</value>
<note></note>
</row>
</section>
</item>
<item>
<name>GoPro Hero 4 Silver</name>
<section>
<name>Video resolution</name>
<row>
<value>4K</value>
<value>15, 12.5</value>
<value>Ultra wide</value>
<value>3840x2160</value>
<note></note>
</row>
<row>
<value>-</value>
<value>-</value>
<value>-</value>
<value>-</value>
<note></note>
</row>
<row>
<value>WVGA</value>
<value>240</value>
<value>Ultra wide</value>
<value>848x480</value>
<note></note>
</row>
</section>
<section>
<name>Video format</name>
<row>
<value>H.264 codec, .MP4 file format</value>
<note></note>
</row>
</section>
<section>
<name>Weight</name>
<row>
<value>83g (oz)</value>
<value>With housing: 147g (oz)</value>
<note></note>
</row>
</section>
</item>
</doc>
CSS:
.item {
width: 250px;
float: left;
}
The outout is correctly displayed on two columns side by side thanks to the CSS .item class.
But now I would like to achieve the following result:
| GoPro 3 Black | GoPro 3 Silver
----------------------------------------------------------
| Video resolution | 4K | 4K |
| | 30, 25, 24 | 15, 12.5 |
| | Ultra wide | Ultra wide |
| | ... | ... |
| | | |
| Video format | H.264 | H.264 |
| | ... | ... |
| | | |
Where video resolution, video format, weight are on the left most column and correctly vertically spaced to be at the right height of the corresponding value.
As I just started to learn XSL, I would like to know is this can be done with XSL or I have to work it out with CSS.
I prefer NOT to use HTML TABLE as afterwords I would like to use some javascript effects to hide and show the columns which I would keep inside DIVs.
No comments:
Post a Comment