Jump to content

How do I generate more complex page layout


knee_boarder

Recommended Posts

I understand how to display data from xml using xslt but only for very simple things like a table row for one item like each photo in the xml below

<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/xsl" href="photoscatalog.xsl"?><photos><pageinfo><pagetitle>Page Title</pagetitle><writeup>Write Up</writeup></pageinfo><photo><title>Title One</title><filename>filename1.jpg</filename></photo><photo><title>Title 2</title><filename>filename2.jpg</filename></photo></photos>

<?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 xmlns="http://www.w3.org/1999/xhtml"><head><xsl:for-each select="photos/pageinfo"><title><xsl:value-of select="pagetitle"/></title></xsl:for-each></head><body>  <xsl:for-each select="photos/pageinfo">  <h1><xsl:value-of select="pagetitle"/></h1>  <p class="bodytext"><xsl:value-of select="writeup"/></p>  </xsl:for-each>  <table border="1">	<tr bgcolor="#9acd32">	  <th>Title</th>	  <th>File Name</th>	  <th>Photo</th>	</tr>	<xsl:for-each select="photos/photo">	<tr>	  <td><xsl:value-of select="title"/></td>	  <td><xsl:value-of select="filename"/></td>	  <td><xsl:variable name="imagename" select="filename"/><xsl:variable name="alttext" select="title"/><img src="../images/spreacombe2010/{$imagename}" alt="{$alttext}" /></td>	</tr>	</xsl:for-each>  </table>  </body>  </html></xsl:template></xsl:stylesheet>

but if I wanted to have two photo's per row or instead of having tables using style sheets and aligning one left and the next right etc, how would I go about doing this?Thanks in advance.

Link to comment
Share on other sites

If you want to have a different HTML layout then the problem is not really with XSLT producing it but rather finding the right HTML and CSS. Ask in an appropriate forum for HTML/CSS how to achieve a two column layout without using tables. Once you have the layout structure you can come back and post the relevant code and then we can help with any XSLT.

Link to comment
Share on other sites

The case of two images per table row is covered by the solution in question 5 from the XSLT FAQ (I know it's not phrased in the way you just said it, but the use cases are so coutless that I never got around to phrasing it better while coverting them all).But indeed, the first thing to ask is how do you do it in HTML/CSS, and THEN find a way to generate the appropriate HTML/CSS with XSLT.

Link to comment
Share on other sites

The case of two images per table row is covered by the solution in question 5 from the XSLT FAQ (I know it's not phrased in the way you just said it, but the use cases are so coutless that I never got around to phrasing it better while coverting them all).
That's exactly what I'm after, thank you very much.I didn't bother asking about the html or css as I understand how to do that, it was displaying the content of the xml with more than one item per row.I normally would do this all server side as my specialities are obtree/livelink scripting and vb.net and I'd deal with the xml there but I wanted to learn how to do it client side as some websites that I work on (outside of my day job) don't allow any server side programming (hosting is cheaper).
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...