Challenges in aligning images side by side within an XSLT document

My XML file is currently being transformed using XSLT to display tables, but I would like these tables to be displayed next to each other in rows of three columns. However, the current output shows them displaying one after another vertically.

Here's the example of the XML data:

<Result>
<DressPrice>
  <Name>Dress 2</Name>
  <Price>20</Price>
  <Image>2.jpg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 9</Name>
  <Price>20</Price>
  <Image>9.jpg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 10</Name>
  <Price>20</Price>
  <Image>10.jpg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 11</Name>
  <Price>20</Price>
  <Image>11.jpg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 12</Name>
  <Price>20</Price>
  <Image>12.jpg</Image>
</DressPrice>
</Result>

The XSLT code used for transformation:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:strip-space elements="*" /> 
<xsl:template match="/">
<html>
    <head><title>Dresses Per Price</title>
    <link rel="stylesheet" type="text/css" href="price.css"/>
    </head>
    <body>
        <h3>Dresses Per Price Displayed</h3>
        <table>
            <thead>
                <tr style="background-color:PaleGreen;"></tr>
                <tr></tr>
            </thead>
            <tbody>
                <xsl:for-each select="Result">
                    <xsl:apply-templates>
                        <xsl:sort select="Name" data-type="text" order="ascending"/>
                    </xsl:apply-templates>
                </xsl:for-each>
            </tbody>
        </table>

    </body>
</html>
</xsl:template>

<xsl:template match="DressPrice">
<xsl:variable name="cssClass">
    <xsl:choose>
        <xsl:when test="position() mod 2 = 0">coloured</xsl:when>
        <xsl:otherwise>normal</xsl:otherwise>
    </xsl:choose>
</xsl:variable>
        <table>
       <tr>
        <xsl:apply-templates select="Image"/>
        </tr>
        </table>
        <table  width="300px" style="text-align:center;">
   <tr style="font-family:Gisha; font-size:15px; color:black;" width="100px" colspan="2"> <xsl:apply-templates select="Name"/></tr>
   </table>
   <table width="300px" style="text-align:center;">
   <tr style="font-family:Gisha; font-size:15px; color:black;"><xsl:apply-templates select="Price"/>
</tr>
</table>
</xsl:template>
<xsl:template match="Image"> <!--To display image-->
    <td style="border: 2px solid black;"><img src="{.}" width="350px"/></td>
</xsl:template>

<xsl:template match="Price">
<td style="width:100px;">$<xsl:value-of select="text()"/></td>
</xsl:template>

<xsl:template match="Name">
<td style="width:100px;"><xsl:value-of select="text()"/></td>
</xsl:template>
</xsl:stylesheet>

I am looking for a solution or guidance on how to modify the XSLT code to display three sets of information (image, description, and price) per row instead of appearing sequentially.

Answer №1

---updated---

If you want to showcase 3 products side by side in a table, here's how you can achieve it:

XSLT 1.0

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

<xsl:template match="/Result">
    <html>
        <head>
            <title>Dresses Per Price</title>
            <link rel="stylesheet" type="text/css" href="price.css"/>
        </head>
        <body>
            <h3>Display of Dresses Based on Price</h3>
            <table>
                <xsl:for-each select="DressPrice[position() mod 3 = 1]">
                    <tr>
                        <xsl:apply-templates select=". | following-sibling::DressPrice[position() &lt; 3]"/>
                    </tr>
                </xsl:for-each>
            </table>
        </body>
    </html>
</xsl:template>

<xsl:template match="DressPrice">
    <td>
        <img src="{Image}"/>
        <br/>
        <xsl:value-of select="Name"/>
        <br/>
        <xsl:value-of select="format-number(Price, '$0.00')"/>
    </td>
</xsl:template>

</xsl:stylesheet>

Note:

An alternative approach is to create an unordered list of all products:

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

<xsl:template match="/Result">
    <html>
        <head>
            <title>Dresses Per Price</title>
            <link rel="stylesheet" type="text/css" href="price.css"/>
        </head>
        <body>
            <h3>Display of Dresses Based on Price</h3>
            <table>
                <ul>
                    <xsl:apply-templates select="DressPrice"/>
                </ul>
            </table>
        </body>
    </html>
</xsl:template>

<xsl:template match="DressPrice">
    <li>
        <img src="{Image}"/>
        <br/>
        <xsl:value-of select="Name"/>
        <br/>
        <xsl:value-of select="format-number(Price, '$0.00')"/>
    </li>
</xsl:template>

</xsl:stylesheet>

Then you can utilize CSS styles to format the list into a grid layout.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typography Addition on Flexslider

I am currently working with flexslider and trying to incorporate a unique text overlay on each individual slide, but so far I have been unsuccessful. <div class="flexslider"> <ul class="slides"> <li> <img src ...

Arrangement of items in a grid with various sizes

I have encountered a challenge that I cannot seem to overcome. In my grid system, there are 18 identical items/boxes. I am looking to remove 4 of those items/boxes and combine them into one large item/box. Refer to the wireframe below for guidance on how ...

ID is not receiving the CSS styles

I'm having trouble applying my CSS to a specific img ID element on the page. I've been trying to solve this for about 30 minutes with no luck. The strange thing is, I have two other elements with the same HTML and CSS that are working correctly. ...

There are currently no articles found that match the search query

Recently, I started working with Django, but I am facing an issue with slug. Whenever I send a request to the Slug, I encounter an error. The error message I receive is: Articles matching query does not exist. Furthermore, I am facing another error while ...

Attach data to a specific position within a jQuery DataTable

Hello everyone! I'm currently attempting to integrate tableInfo into a jquery DataTable, as shown below: However, when I modify the value in show-list, the information shifts down to the center of the column, as illustrated here: I have experimented ...

having difficulty applying a border to the popup modal

Currently, I am utilizing a Popup modal component provided by the reactjs-popup library. export default () => ( <Popup trigger={<button className="button"> Guide </button>} modal nested > {(close: any) =&g ...

Issue with Bootstrap4 card alignment on Chrome browser

Hey there! I could use some assistance with an issue I'm facing in Bootstrap4 cards while using Chrome. The strange thing is that everything seems to be working fine on IE11, but not on Chrome. Take a look at the comparison images below: IE11 layout ...

Creating consistent row spacing between Bootstrap 5 rows that matches the spacing in Bootstrap 4

Is it possible to adjust the site.css file in order to achieve a similar row spacing effect as Bootstrap 5 when working with existing HTML code? ...

Is there a way to create a flexbox that combines a centered fixed child with a fixed child at the bottom?

I'm trying to create a layout using flexbox that looks like this: | | | | | CENTER FIXED ELEMENT | | | | BOTTOM FIXED ELEMENT | Here is the flexbox CSS I've attempted: .wrapper{ ...

I am currently engaged in a Portfolio project, where my objective is to ensure that all images are optimized for responsiveness

While Bootstrap ensures that relative images are responsive, absolute images may not be. This can cause alignment issues when the browser window is resized on mobile devices. .title-img { position: relative; width: 100%; height: 100%; } .skill-b ...

Steps for making a CSS hover box with two sections

Recently, I came across a helpful tip on Stack Overflow about creating a box when hovering over text using pure CSS. It was quite interesting to implement. I decided to experiment with the cursor position and placement as well. span{ background:#F8F8 ...

Tips on adjusting the height of divs in a simple layout

I'm trying to make two divs fill the page with a ratio of 70% and 30%. However, I don't want to set the size of the "html" or "body" elements. How can I achieve this without affecting the height of the text within the divs? Currently, it only dis ...

When the browser window is resized to mobile view, a div is overlapped by an image

I've encountered an issue with the image size and position when resizing to mobile view in the browser. .extension { display: table; padding: 50px 0px 50px; width: 100%; height: auto; color: #fff; background-color: #558C89; ...

Utilize a specific component to enclose particular words within a contenteditable div in an Angular project

I have a task at hand where I need to manipulate text input from a contenteditable division, use regex to identify specific words, and then wrap those words within an angular component. Although I have managed to successfully replace the text with the com ...

Can a radio button set be designed in two dimensions?

There are three sets of data (dataX, dataY, dataZ) that need to be assigned unique values out of a selection of three options (valueA, valueB, valueC). Each piece of data should be linked to one value and each value should have only one data associated wit ...

"Trouble with 3D hexagonal grid in CSS - unable to achieve desired display

In order to create a dynamic Hexagonal Grid using CSS, the objective is to automatically reorganize hexes in a circular or rectangular manner when a new div with a specific class (e.g. 'hexes') is added to the view. Currently, there is a grid wi ...

Encountered a 404 error while handling the Express 4 module, indicating that the 'html' module could not be

I need to update my express app to handle 404 (and 500) errors by displaying HTML instead of plain text. I have been able to show text to the client for 404 errors, but now I want to show HTML instead. My 404.html file is located in the /app directory. Cu ...

What is the best way to use CSS 3 to resize and enlarge an image, such as sprite icons?

Hello everyone, Picture this: a sprite image named icons.png linked to the css class .icons, featuring various 10x10px graphics. Now imagine needing another class that enlarges these sprite graphics exactly twice their size, making them 20x20 pixels on the ...

Issues with styling SVG when using the `<use>` element

I am currently faced with a challenge involving CSS, where I need to modify the size and color of an SVG element that is being displayed using <use>. The specific SVG in question is as follows: <svg xmlns="http://www.w3.org/2000/svg" width="24" h ...

Discover the step-by-step guide to implementing pagination using NG-ZORRO-Andt in your Angular

I am currently using NG-ZORRO Ant Design pagination on my HTML page and it is displaying correctly in my browser. However, I am struggling with linking the data from the API to the pagination feature. Here is the snippet of my HTML code: <div class ...