XML Stack Overflow: Put td in different rows if more than 3

I'm making a basic "choose your own adventure" game with xml+xslt. Here is what it currently looks like : screenshot The different answers the player can pick are the grey areas. It looks nice enough to me, only I would like the answers to appear on different rows if needed. Like, if there is more than 3 answers.

Here is the concerned html after xslt transform :


<div id="cadre" style="     height:800px; width:800px;     margin-left :auto;     margin-right :auto;     overflow:hidden;    ">
    <div ID="1" style="stuff">
    <img style="stuff" src="images/sexylama.gif"/>
    <p>Es-tu prête pour une aventure pleine de passion ?</p>
    <table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
          <tr>
                <td style=" padding : 5px;  width:auto; height:100px; text-align:center;  background:#eeeeee;  ">
                <a href="#4" style="stuff">Oui</a></td>

                <td style="padding : 5px; width:auto;   height:100px; text-align:center;  background:#eeeeee; ">
                <a href="#2" style="stuff">Non</a> </td>

                <td style="      padding : 5px;   width:auto;   height:100px;  text-align:center;  background:#eeeeee; ">
                <a href="#2" style="stuff">Jt'en pose des questions ?</a> </td>

                 <td style="      padding : 5px;      width:auto;      height:100px;  text-align:center;  background:#eeeeee;  ">
                <a href="#2" style="text-decoration:none;color:black;font-size:1.2em;">stuff</a> </td>
         </tr>
    </table>
    </div>

   <div ID="2" style="stuff">
    <img style="stuff" src="images/somethingelse.gif"/>
    <p>Here is another question</p>
    <table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
          <tr>
                <td style=" padding : 5px;  width:auto; height:100px; text-align:center;  background:#eeeeee;  ">
                <a href="#4" style="stuff">yes</a></td>

                <td style="padding : 5px; width:auto;   height:100px; text-align:center;  background:#eeeeee; ">
                <a href="#2" style="stuff">No</a> </td>
         </tr>
    </table>
    </div>

   ....

The sexy llama with the current question and the current answers are the only things displayed. In fact, the other questions/answers/llamas are present if you could scroll, but they are hidden with fixed height + overflow: hidden

The xml looks like this :


<gameofdoom>

<etape ID="1">
    <texte>Es-tu prête pour une aventure pleine de passion ?</texte>
    <image>images/sexylama.gif</image>
    <choix cible="4">Oui</choix>
    <choix cible="2">Non</choix>
    <choix cible="2">Jt'en pose des questions ?</choix>
    <choix cible="2">T'as pas peur de péter ta mise en page pourrie en mettant des choix trop longs ?</choix>
</etape>


<etape ID="2">
    <texte>Préférez-vous celle des trois minces grands échalas ?</texte>
    <choix cible="16">Oui</choix>
    <choix cible="3">Non</choix>
</etape>

...

</gameofdoom>

And here you get the main part, the xslt sheet :


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://ift.tt/tCZ8VR" version="1.0"
        xmlns="http://ift.tt/lH0Osb">

<xsl:template match="/gameofdoom">
    <html>
        <head>
            <meta charset="UTF-8"/>
            <link rel="stylesheet" href="rien.css" type="text/css"/>
            <title>DAT DATIN SIM OF DOOM</title>
        </head>
        <body style="text-align:center;">

            <!-- this deals with showing one "etape" at a time-->
            <div id="cadre" style="
                height:800px; width:800px;
                margin-left :auto;
                margin-right :auto;
                overflow:hidden;
            ">
            <xsl:apply-templates select="etape"/>
            </div>
        </body>
    </html>
</xsl:template>



<xsl:template match="etape">

    <!-- shows the etape-->
    <div ID="{@ID}" style="
        height: 800px;
        margin-bottom:500px;
        padding:30px;
        text-align:center;
    ">

    <!-- image  -->
    <xsl:apply-templates select="image"/>



    <!-- shows the text of the etape -->
    <p><xsl:value-of select="texte"/></p>

    <!-- table for showing different answer choices next to another -->
    <table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
        <tr>
            <xsl:for-each select="choix">

                <!-- one choice answer -->
                <td style="
                    padding : 5px;
                    width:auto;
                    height:100px;
                    text-align:center;
                    background:#eeeeee;
                ">
                <xsl:apply-templates select="."/>
                </td>
            </xsl:for-each>
        </tr>
    </table>
    </div>


</xsl:template><!--/etape-->


<xsl:template match="choix">
    <a href="#{@cible}" style="text-decoration:none;color:black;font-size:1.2em;">
        <xsl:value-of select="."/>
    </a><xsl:text> </xsl:text>
</xsl:template>


<xsl:template match="image">
    <img style="margin-left:auto;margin-right:auto;width:300px;margin-top:30px;" src="{.}"></img>
</xsl:template>

</xsl:stylesheet>

Sorry for all the french in code, I'll translate anything if needed.

Thank you all for your precious time !

XML Stack Overflow

Saturday, 6 December 2014

Put td in different rows if more than 3

No comments:

Post a Comment