Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 536
  • Last Modified:

XSL, XML display problem

Hello,

I would like to display the values from these two xsl templates on one line centred. I have pasted also the css code for this template. At the moment the level value is centred, but the data value is on a seperate line. I have also tried nowrap which made no difference. I can post the full code if you wish.

Thanks

<xsl:template match="LEVEL">
<div class= "level"><xsl:value-of select="."/> LEVEL MODULE <xsl:apply-templates select="DATE"/></div>
</xsl:template>


<xsl:template match="DATE">
<xsl:value-of select="."/>
</xsl:template>

.level
{
text-align: center;
font-family: Arial;
font-size: 12pt;
font-weight: bold;
margin-bottom: 0.3cm;
}
0
AntoniRyszard656
Asked:
AntoniRyszard656
  • 9
  • 7
1 Solution
 
metalmickeyCommented:
For this XML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="table.xsl"?>
<root>
    <LEVEL>1</LEVEL>
    <DATE>11/11/2003</DATE>
</root>


this template seems to work for me.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
  <xsl:template match="/">
    <html>
      <title/>
      <head>
      <style type="text/css">
      .level
{
text-align: center;
font-family: Arial;
font-size: 12pt;
font-weight: bold;
margin-bottom: 0.3cm;
}
      </style>
      </head>
      <body>
<div class= "level">
          <xsl:apply-templates/>
</div>

</body>
</html>
  </xsl:template>
 
<xsl:template match="LEVEL">
<xsl:value-of select="."/> LEVEL MODULE
</xsl:template>

<xsl:template match="DATE">
<xsl:value-of select="."/>
</xsl:template>
</xsl:stylesheet>

Depending on what order the nodes are in  DATE then LEVEL rather than LEVEL than DATE

you could use

 <xsl:value-of select="following-sibling::DATE"/>

or

<xsl:value-of select="preceding-sibling::DATE"/>

depending on where it is in the doc. Then you wouldnt need a template that matched the DATE node


MM



0
 
AntoniRyszard656Author Commented:
Thank you for replying.

I tried the <xsl:value-of select="following-sibling::DATE"/> line, and this displays the level and date values on the same line, though a second date is now displayed on a seperate line, even when I removed the date template. Also to note the css code has its own file. The level, Date, XML tags are all part of a larger tag named info, below is the xsl template. I have used the apply-templates , and I think this is the reason why the second date is displayed. I needed use the apply-template function, because the tags within the xml INFO are not always the same.

<xsl:template match="INFO">
<div class= "coursecode"><xsl:value-of select="COURSE/@code"/></div>
<div class="coverpage"><xsl:apply-templates/></div>
</xsl:template>

Any further advice would be appreciated.

I have a further question, the xsl templates below display a roman numerial and then the subquestion. I have been trying to display the subquestions on the same line as the roman numerial. But with a gap between for example: To date I can only archieve the subquestion of the line under the roman numerial.

i)          Subquestion goes here      
                                                                              [10]                              

<xsl:template match="SUBQUESTION">
<xsl:number format="i) "/>
<div class="subquestion"><xsl:apply-templates /></div>
<xsl:if test="@marks&gt;0">
<div class="marks">[Marks <xsl:value-of select="@marks"/>]</div>
</xsl:if>
</xsl:template>

Here is the XML format

<QUESTION>

       <SUBQUESTION marks="5">
       </SUBQUESTION>
       <SUBQUESTION marks="5">
       </SUBQUESTION>
       <SUBQUESTION marks="5">
       </SUBQUESTION>
       <SUBQUESTION marks="5">
       </SUBQUESTION>
</QUESTION>

And CSS

.subquestion
{
vertical-align:top;
font-family: Arial;
font-size: 12pt;
margin-left: 1.5cm;
}

.marks
{
margin-left: 16.5cm;
font-family: Arial;
font-size: 12pt;
margin-bottom: 0.3cm;
}
0
 
metalmickeyCommented:
You'll have to be careful using the generic apply-templates and specifically  using a apply templates select=""

I presume that since you ve got DATE showing twice, as your 2 templates are calling two instances of DATE

rather than using the apply tempates in here....

<xsl:template match="INFO">
<div class= "coursecode"><xsl:value-of select="COURSE/@code"/></div>
<div class="coverpage"><xsl:template match="INFO">
<div class= "coursecode"><xsl:value-of select="COURSE/@code"/></div>
<div class="coverpage"><xsl:apply-templates/></div>
</xsl:template></div>
</xsl:template>

could you specifically call the ones you need instead?


If you need to apply a template independantly of heirarchy/document order you could try using moded templates.

you could build a template

<xsl:template match="INFO">
<div class= "coursecode"><xsl:value-of select="COURSE/@code"/></div>
<div class="coverpage"><xsl:template match="INFO">
<div class= "coursecode"><xsl:value-of select="COURSE/@code"/></div>
<div class="coverpage">

     <xsl:apply-templates mode="anton"/>

</div>
</xsl:template></div>
</xsl:template>

which would only apply templates in a certain mode

<xsl:template match="DATE" mode="anton">
do your moded stuff
</xsl:template>

But as im not sure what you are going to to i cant be more specific.


Can you post your XML and XSLT





0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
AntoniRyszard656Author Commented:
Thank you for replying.

Could you explain how to e-mail the code, or should I just past all the xml, xsl, and css in the message?

thanks
0
 
metalmickeyCommented:
yep just post it on the board.

If anyone else would care to take a look, they'll be able to.

MM
0
 
AntoniRyszard656Author Commented:
Thank you for replying.

I will need to prepare the code: though

I have a further question, the xsl templates below display a roman numerial and then the subquestion. I have been trying to display the subquestions on the same line as the roman numerial. But with a gap between for example: To date I can only archieve the subquestion of the line under the roman numerial.

i)          Subquestion goes here      
                                                                              [10]                              

<xsl:template match="SUBQUESTION">
<xsl:number format="i) "/>
<div class="subquestion"><xsl:apply-templates /></div>
<xsl:if test="@marks&gt;0">
<div class="marks">[Marks <xsl:value-of select="@marks"/>]</div>
</xsl:if>
</xsl:template>

Here is the XML format

<QUESTION>

       <SUBQUESTION marks="5">
       </SUBQUESTION>
       <SUBQUESTION marks="5">
       </SUBQUESTION>
       <SUBQUESTION marks="5">
       </SUBQUESTION>
       <SUBQUESTION marks="5">
       </SUBQUESTION>
</QUESTION>

And CSS

.subquestion
{
vertical-align:top;
font-family: Arial;
font-size: 12pt;
margin-left: 1.5cm;
}

.marks
{
margin-left: 16.5cm;
font-family: Arial;
font-size: 12pt;
margin-bottom: 0.3cm;
}
0
 
metalmickeyCommented:
try this for your marks

Ive outlined the subquestions in black and the marks in red (you can remove these once you're done. Your problem was that your numbering is outside the subquestion div, and you've used 2 divs for styling wheras you should have used a span. Your two divs were outlining a large block area one after the other. You should have nested them instead

Divs area for block elements
Spans are for inline elements

This should work, although you werent far off.



<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
  <xsl:template match="QUESTION">
    <html>
      <title/>
      <head>
      <style type="text/css">
      .subquestion
{
vertical-align:top;
font-family: Arial;
font-size: 12pt;
margin-left: 1.5cm;
border:1px solid black;

}

.marks
{
margin-left: 16.5cm;
font-family: Arial;
font-size: 12pt;
margin-bottom: 0.3cm;
border:1px solid red;
}
      </style>
      </head>
      <body>
        <xsl:apply-templates/>
      </body>
    </html>
  </xsl:template>
 
  <xsl:template match="SUBQUESTION">  
    <div class="subquestion"><xsl:number format="i) "/><xsl:apply-templates/>
      <xsl:if test="@marks&gt;0">
        <span class="marks">[Marks <xsl:value-of select="@marks"/>]</span>
      </xsl:if>
    </div>
  </xsl:template>
 
  <xsl:template match="@marks"/>
</xsl:stylesheet>


MM
0
 
AntoniRyszard656Author Commented:
Thank you for replying.

I tried the last code you posted to change the subquestion layout. This works thank you, though I was hoping to achieve the layout as below. Could you suggest how I could achieve this, with the almost boxed subquestins part.

Thank you

Example

i)     Pass the values entered by the user to the appreciate funtions
       and display the calculated value on the screen.

                                                                                             [5]
ii)    Next question

0
 
metalmickeyCommented:
You could change the number format to an  ordered list <ol type="i"> around the apply templates and build a <li> in every Subquestion.

Think about your html formatting first, build the page, they try to apply it to the xslt.

Assuming your xml looks somthing like the below

XML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="t1.xsl"?>
<root>
<QUESTION>
Pass the values entered by the user to the appreciate funtions  and display the calculated value on the screen.
  <SUBQUESTION marks="5"/>
  <SUBQUESTION marks="5"/>
  <SUBQUESTION marks="5"/>
  <SUBQUESTION marks="5"/>
</QUESTION>
<QUESTION>
What number bus did i lose my moby on last night?
  <SUBQUESTION marks="5"/>
  <SUBQUESTION marks="5"/>
  <SUBQUESTION marks="5"/>
  <SUBQUESTION marks="5"/>
</QUESTION>
<QUESTION>
Inst the experts-exchange great? how do they do it?
  <SUBQUESTION marks="5"/>
  <SUBQUESTION marks="5"/>
  <SUBQUESTION marks="5"/>
  <SUBQUESTION marks="5"/>
</QUESTION>
</root>


your xslt would look like this

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
  <xsl:template match="/">
    <html>
      <title/>
      <head>

      <style type="text/css">
      .subquestion
{
vertical-align:top;
font-family: Arial;
font-size: 12pt;
margin-left: 1.5cm;
border:1px solid black;

}

.marks
{
margin-left: 16.5cm;
font-family: Arial;
font-size: 12pt;
margin-bottom: 0.3cm;
border:1px solid red;
}
      </style>

      </head>
      <body>
<ol type="1">
        <xsl:apply-templates/>
</ol>
      </body>
    </html>
  </xsl:template>
 
  <xsl:template match="QUESTION">
  <li class="subquestion"><xsl:apply-templates/></li>
  </xsl:template>
 
<xsl:template match="SUBQUESTION">  
    <xsl:apply-templates/>  
      <xsl:if test="@marks&gt;0">
<br clear="all"/>
        <span style="float:right">[Marks <xsl:value-of select="@marks"/>]</span>
      </xsl:if>
 
  </xsl:template>
 
  <xsl:template match="@marks"/>
</xsl:stylesheet>


and your output would look like this

<html xmlns:fo="http://www.w3.org/1999/XSL/Format">
<title></title>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-16">
<style type="text/css">
      .subquestion
{
vertical-align:top;
font-family: Arial;
font-size: 12pt;
margin-left: 1.5cm;
border:1px solid black;

}

.marks
{
margin-left: 16.5cm;
font-family: Arial;
font-size: 12pt;
margin-bottom: 0.3cm;
border:1px solid red;
}
      </style>
</head>
<body>
<ol type="1">
<li class="subquestion">
Pass the values entered by the user to the appreciate funtions  and display the calculated value on the screen.
  <br clear="all"><span style="float:right">[Marks 5]</span><br clear="all"><span style="float:right">[Marks 5]</span><br clear="all"><span style="float:right">[Marks 5]</span><br clear="all"><span style="float:right">[Marks 5]</span></li>
<li class="subquestion">
What number bus did i lose my moby on last night?
  <br clear="all"><span style="float:right">[Marks 5]</span><br clear="all"><span style="float:right">[Marks 5]</span><br clear="all"><span style="float:right">[Marks 5]</span><br clear="all"><span style="float:right">[Marks 5]</span></li>
<li class="subquestion">
Inst the experts-exchange great? how do they do it?
  <br clear="all"><span style="float:right">[Marks 5]</span><br clear="all"><span style="float:right">[Marks 5]</span><br clear="all"><span style="float:right">[Marks 5]</span><br clear="all"><span style="float:right">[Marks 5]</span></li>
</ol>
</body>
</html>

IF YOUR XML IS NOT THE SAME AS THE ONE IVE SUGGESTED POST YOURS ON THIS Q AREA AND I'LL HAVE A CLOSER LOOK.


MM
0
 
AntoniRyszard656Author Commented:
Thank you for your guidance.

I would like to ask finally, would it be possible to use a xml table to name the webpages available on a site as below, and when allow the user to click the names, and the page is loaded. I have copied my xml, xsl code here for using tables.

(XML)

<TABLE>
<ROW><CELL>Home page</CELL></ROW>
<ROW><CELL>Page 1 name</CELL></ROW>
<ROW><CELL>Page 2 name</CELL></ROW>
<ROW><CELL>Page 3 name</CELL></ROW>
<ROW><CELL>Page 4 name</CELL></ROW>
<ROW><CELL>Page 5 name</CELL></ROW>
</TABLE>

(XSL)

<xsl:template match="TABLE">
<div class="table">
<table border="3">
<xsl:apply-templates select="ROW"/>
</table>
</div>
</xsl:template>


<xsl:template match="ROW">
<tr>
<xsl:apply-templates select="CELL"/>
</tr>
</xsl:template>


<xsl:template match="CELL">
<td>
<xsl:value-of select="."/>
</td>
</xsl:template>
0
 
metalmickeyCommented:
This will build links out of your table cells athough you'll need to get the URLS from somewhere.

<xsl:template match="CELL">
<td>
<a>
<xsl:attrubite name="href">PAGE URL GOES HERE</xsl:attribute>
<xsl:value-of select="."/>
</a>
</td>
</xsl:template>

MM
0
 
AntoniRyszard656Author Commented:
Thank you for replying.

The xml code here displays a table on the top left side of the screen, and the INFO tag under the table. Would it be possible to display the data and graphics from the INFO tag next to the table?

Many thanks

(XML)

<PAGES>

<TITLE>
    <TABLE>
    <ROW><CELL>Home Page</CELL></ROW>
    <ROW><CELL>Link 2</CELL></ROW>
    <ROW><CELL>Link 3</CELL></ROW>
    <ROW><CELL>Link 4</CELL></ROW>
    <ROW><CELL>Link 5</CELL></ROW>
    <ROW><CELL>Link 6</CELL></ROW>
    </TABLE>

    <INFO>
           Many tags including text and graphics
    </INFO>

</TITLE>

</PAGES>

(XSL)

<xsl:template match="TITLE">
<xsl:apply-templates select="TABLE"/>
<xsl:apply-templates select="INFO"/>
</xsl:template>


<xsl:template match="TABLE">
<div class="table">
<table border="3">
<xsl:apply-templates select="ROW"/>
</table>
</div>
</xsl:template>


<xsl:template match="ROW">
<tr>
<xsl:apply-templates select="CELL"/>
</tr>
</xsl:template>


<xsl:template match="CELL">
<td>
<a>
<xsl:attribute name="href">PAGE URL GOES HERE</xsl:attribute>
<xsl:value-of select="."/>
</a>
</td>
</xsl:template>
0
 
metalmickeyCommented:
I think that this is more of a HTML Q than  XML,

If you add float:left to the table style the text should sit next to the table. although it depends on your html construction. If there is a paragraph break before the INFO tag the text will always be below the table.

You should really lay out a html template before you start to code your xslt otherwise you'll find yourself fixing bot xslt and html rather than concetrating on the job in hand.

your xsl looks like its trying to build a table, but its within a div,

<xsl:template match="TABLE">
<div class="table">
<table border="3">
<xsl:apply-templates select="ROW"/>
</table>
</div>
</xsl:template>

why not just use

<table class="table">
 your div is probably preventing the INFO text from sitting next to the table.

Hope this helps and good luck with the rest of the template

MM


0
 
AntoniRyszard656Author Commented:
Thank you for replying.

I wondered if you could demonstrate your meaning of a html template? I removed the table div because this actually did not have any function. And pasted all the xml and xsl code. I wished the title tag containing a table to be displayed on the left hand side, and text tag to be displayed next to the table.

I would much appreciate your guidance.


<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="transform.xsl" type="text/xsl"?>

<PAGES>
      <TITLE>
            <TABLE>
            <ROW><CELL>Home page</CELL></ROW>
            <ROW><CELL>Link 1</CELL></ROW>
            <ROW><CELL>Link 2</CELL></ROW>
            <ROW><CELL>Link 3</CELL></ROW>
            <ROW><CELL>Link 4</CELL></ROW>
            <ROW><CELL>Link 5</CELL></ROW>
            <ROW><CELL>Link 6</CELL></ROW>
            </TABLE>
      </TITLE>
      <TEXT>
            <DESCRIPTION>
            </DESCRIPTION>
      
              <DESCRIPTION>
              </DESCRIPTION>
            <EMAIL>

            </EMAIL>
            
      </TEXT>
</PAGES>


<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:template match="PAGES">
<html>
<head>
<title>SNJ Software</title>
<link rel="stylesheet" type="text/css" href="display.css"/>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>


<xsl:template match="TITLE">
<xsl:apply-templates select="TABLE"/>
<xsl:apply-templates select="TEXT"/>
</xsl:template>


<xsl:template match="TEXT">
<xsl:apply-templates/>
</xsl:template>


<xsl:template match="DIAGRAM">
<xsl:if test="@align='center'">
<div class="diagram"><img src="{@url}"/></div>
</xsl:if>
</xsl:template>


<xsl:template match="TABLE">
<table border="3">
<xsl:apply-templates select="ROW"/>
</table>
</xsl:template>


<xsl:template match="ROW">
<tr>
<xsl:apply-templates select="CELL"/>
</tr>
</xsl:template>


<xsl:template match="CELL">
<td>
<a>
<xsl:attribute name="href">PAGE URL GOES HERE</xsl:attribute>
<xsl:value-of select="."/>
</a>
</td>
</xsl:template>

</xsl:stylesheet>
0
 
metalmickeyCommented:
HTML template means build a blank page with dummy stuff in it then populate it with the xml. Dot try and build the html and xml page all at once.

I think this Question has gone on long enough and i think ive answered the original Question posted amongst several others!

Now thats what i call value.

MM
0
 
metalmickeyCommented:
If you need html Help post a Q in the HTML area

http://oldlook-search.experts-exchange.com/Web/Web_Languages/HTML/
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now