Help with positioning a DIV using XSLT and XML

skidmerc · May 2nd, 2008, 05:14 AM

Hi,

Here is the XSLT code I have as an example.

Code:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output method="html" indent="yes"
 doctype-public="-//W3C//DTD HTML 4.0 Transitional//EN"/> 
 <xsl:template match="/">
  <html>
   <head>
    <title></title>
   </head>
   <body>
       <h3><center></center></h3>
       <h4</h4>

    <xsl:for-each select="Template/TemplateItems/TemplateItem">
                <xsl:if test="@ControlType='Label'">
                    <div>
                        <xsl:attribute name="border">1px solid</xsl:attribute>
                        <xsl:attribute name="position">absolute</xsl:attribute>
                        <xsl:attribute name="Width">
                            <xsl:value-of select="Properties/Layout/@Width"/>
                        </xsl:attribute> 
                        <xsl:attribute name="Height">
                            <xsl:value-of select="Properties/Layout/@Height"/>
                        </xsl:attribute>
                        <xsl:attribute name="Top">
                            <xsl:value-of select="Properties/Layout/@X"/>
                        </xsl:attribute>
                            <b>
                                    <xsl:value-of select="Properties/Text"/>
                            </b>
                            <b>
                                    <xsl:value-of select="Properties/Layout/@X"/>
                            </b>
                            <b>
                                    <xsl:value-of select="Properties/Layout/@Y"/>
                            </b>
                        </div>
                </xsl:if>


                <xsl:if test="@ControlType = 'Link'">
                    <xsl:value-of select="Properties/Text"/>
                </xsl:if>
    </xsl:for-each>
   </body>
  </html>
 </xsl:template>
</xsl:stylesheet>

You can see below there is a layout tag, with Height, width, X, and Y.
What I want to do is for each template item position a DIV on screen using those attributes.

I don't think I'm far away am I?

Here is my XML:

Code:

<?xml version="1.0" encoding="utf-16"?>
<?xml-stylesheet type='text/xsl' href='\apps\cdss\SuppliedTemplates\Style Sheets\TemplateExport.xslt'?>
<Template xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" Selectable="false">
  <Author />
  <Password />
  <PasswordRequired>false</PasswordRequired>
  <TemplateItems>
    <TemplateItem Index="3" ID="0" ControlType="Label">
      <TagIconFileName />
      <Properties>
        <Forecolor Name="WindowText" ARGB="-16777216" />
        <Text />
        <Layout Height="32" Width="562" X="0" Y="0" />

          <LOGFONT>
            <LfHeight>-8</LfHeight>
            <LfWidth>0</LfWidth>
            <LfEscapement>0</LfEscapement>
            <LfOrientation>0</LfOrientation>
            <LfWeight>FW_NORMAL</LfWeight>
            <LfItalic>false</LfItalic>
            <LfUnderline>false</LfUnderline>
            <LfStrikeOut>false</LfStrikeOut>
            <LfCharSet>ANSI_CHARSET</LfCharSet>
            <LfOutPrecision>OUT_DEFAULT_PRECIS</LfOutPrecision>
            <LfClipPrecision>CLIP_DEFAULT_PRECIS</LfClipPrecision>
            <LfQuality>DEFAULT_QUALITY</LfQuality>
            <LfPitchAndFamily>0</LfPitchAndFamily>
            <LfFaceName>Microsoft Sans Serif</LfFaceName>
          </LOGFONT>

      </Properties>
      <PrescriptionType>Unknown</PrescriptionType>
      <LinkName />
      <EmbeddedURL>false</EmbeddedURL>
      <LineThickness>0</LineThickness>
    </TemplateItem>
    <TemplateItem Index="1" ID="0" ControlType="Label">
      <TagIconFileName />
      <Properties>
        <Forecolor Name="WindowText" ARGB="-16777216" />
        <Text>Hello 
This is Div 1</Text>
        <Layout Height="32" Width="221" X="45" Y="30" />

          <LOGFONT>
            <LfHeight>-8</LfHeight>
            <LfWidth>0</LfWidth>
            <LfEscapement>0</LfEscapement>
            <LfOrientation>0</LfOrientation>
            <LfWeight>FW_NORMAL</LfWeight>
            <LfItalic>false</LfItalic>
            <LfUnderline>false</LfUnderline>
            <LfStrikeOut>false</LfStrikeOut>
            <LfCharSet>ANSI_CHARSET</LfCharSet>
            <LfOutPrecision>OUT_DEFAULT_PRECIS</LfOutPrecision>
            <LfClipPrecision>CLIP_DEFAULT_PRECIS</LfClipPrecision>
            <LfQuality>DEFAULT_QUALITY</LfQuality>
            <LfPitchAndFamily>0</LfPitchAndFamily>
            <LfFaceName>Microsoft Sans Serif</LfFaceName>
          </LOGFONT>

      </Properties>
      <PrescriptionType>Unknown</PrescriptionType>
      <LinkName />
      <EmbeddedURL>false</EmbeddedURL>
      <LineThickness>0</LineThickness>
    </TemplateItem>
    <TemplateItem Index="2" ID="0" ControlType="Label">
      <TagIconFileName />
      <Properties>
        <Forecolor Name="WindowText" ARGB="-16777216" />
        <Text>Hello 
This is Div 2</Text>
        <Layout Height="32" Width="221" X="106" Y="82" />

          <LOGFONT>
            <LfHeight>-8</LfHeight>
            <LfWidth>0</LfWidth>
            <LfEscapement>0</LfEscapement>
            <LfOrientation>0</LfOrientation>
            <LfWeight>FW_NORMAL</LfWeight>
            <LfItalic>false</LfItalic>
            <LfUnderline>false</LfUnderline>
            <LfStrikeOut>false</LfStrikeOut>
            <LfCharSet>ANSI_CHARSET</LfCharSet>
            <LfOutPrecision>OUT_DEFAULT_PRECIS</LfOutPrecision>
            <LfClipPrecision>CLIP_DEFAULT_PRECIS</LfClipPrecision>
            <LfQuality>DEFAULT_QUALITY</LfQuality>
            <LfPitchAndFamily>0</LfPitchAndFamily>
            <LfFaceName>Microsoft Sans Serif</LfFaceName>
          </LOGFONT>

      </Properties>
      <PrescriptionType>Unknown</PrescriptionType>
      <LinkName />
      <EmbeddedURL>false</EmbeddedURL>
      <LineThickness>0</LineThickness>
    </TemplateItem>
    <TemplateItem Index="4" ID="0" ControlType="Label">
      <TagIconFileName />
      <Properties>
        <Forecolor Name="WindowText" ARGB="-16777216" />
        <Text>Hello 
This is Div 3</Text>
        <Layout Height="32" Width="221" X="72" Y="143" />

          <LOGFONT>
            <LfHeight>-8</LfHeight>
            <LfWidth>0</LfWidth>
            <LfEscapement>0</LfEscapement>
            <LfOrientation>0</LfOrientation>
            <LfWeight>FW_NORMAL</LfWeight>
            <LfItalic>false</LfItalic>
            <LfUnderline>false</LfUnderline>
            <LfStrikeOut>false</LfStrikeOut>
            <LfCharSet>ANSI_CHARSET</LfCharSet>
            <LfOutPrecision>OUT_DEFAULT_PRECIS</LfOutPrecision>
            <LfClipPrecision>CLIP_DEFAULT_PRECIS</LfClipPrecision>
            <LfQuality>DEFAULT_QUALITY</LfQuality>
            <LfPitchAndFamily>0</LfPitchAndFamily>
            <LfFaceName>Microsoft Sans Serif</LfFaceName>
          </LOGFONT>

      </Properties>
      <PrescriptionType>Unknown</PrescriptionType>
      <LinkName />
      <EmbeddedURL>false</EmbeddedURL>
      <LineThickness>0</LineThickness>
    </TemplateItem>
  </TemplateItems>
</Template>

Currently the items just sit one after the other as though no properties are being added to the DIV at all?

Thanks

samjudson · May 2nd, 2008, 05:18 AM

So your XSLT is working fine but you don't know how to position a DIV?

Then this isn't a question for this forum is it, you want an HTML or CSS forum.

/- Sam Judson : Wrox Technical Editor -/

skidmerc · May 2nd, 2008, 05:48 AM

No, I want to position the DIV using the attributes in the XML file.

I could hard code the position in the <div> tag, but I need it to pull from the XML as there could be hundreds of template items.

skidmerc · May 2nd, 2008, 06:45 AM

For future reference, here is what I did to resolve the problem:

Code:

<xsl:attribute name="Style">position:absolute; left:<xsl:value-of select="Properties/Layout/@X"/>em;top:<xsl:value-of select="Properties/Layout/@Y"/>em;</xsl:attribute>