Anyone? :D

-Homepage
---------MODEL Line Up (the xslt macro is here to get the categories and cars)
          ---------Cars
                      -------Car1 (thumbnail, price and small description is here)
                      -------Car2
                      -------Car3
          ---------SUV
                      -------SUV1
                      -------SUV2
                      -------SUV3

I think you're trying to receive the image with:

  name="mediaId" select="number($currentPage/data[@alias='modelThumbnail'])" />

That's a request for the image from the currentpage. You're inside a nested loop so, the image is coming from a Car, so you should use something like:

  name="mediaId" select="number(data[@alias='modelThumbnail'])" />

Personally, I don't like tables, just use it for tabular data. In this case i would use other markup like:

<xsl:foreach select="all categories">
    <h2>Cars</h2>
    <div class="category">
        <xsl:foreach select="all cars">
            <div class="car">
                <img src="#" alt="name"/>
                <ul>
                    <li><a href="#">name of the car</a></li>
                    <li>property 1</li>
                    <li>property 2</li>
                </ul>
            </div>    
        </xsl:foreach>
    </div>
</xsl:foreach>

Use css for styling.

Hi Folkert

Thanks for the tip. The markup that you posted will render the same output with what I'm getting.

Image1 Property1
Image2 Property2
Image3 Property3
Image4 Property4

What I want to achieve is something like:

Image1 Property1                    Image2 Property2
Image3 Property3                    Image4 Property4

How can I make the 2nd node to go to the left of the 1st node and the 3rd node to be on the next line.

Regards,
Harry

Themarkup I posted wil just render the ouput, nothing will happen unless you use css. Choose correct markup for the elements you're using. Using tables is just for tabular data.

Having a layout, like yours you have to define the xslt like:

<xsl:foreach select="all categories">
    <div class="category">    
        <h2>Cars</h2>
        <xsl:foreach select="all cars">
            <div class="car">
                <img src="#" alt="name"/>
                <ul>
                    <li><a href="#">name of the car</a></li>
                    <li>property 1</li>
                    <li>property 2</li>
                </ul>
            </div>    
        </xsl:foreach>
        <div class="clear"></div>
    </div>
</xsl:foreach>
<div class="clear"></div>

and some css like:

div.category h2
{
    border-bottom:solid 1px #666;
}

div.car
{
    float:left;
    width:300px;
    height:200px;
}

div.car img
{
    float:left;
    margin-right:10px;
}

.clear
{
 clear:both;
   height:0;
 visibility:hidden;
    width:0;
}

This is just a small guide/idea and is not tested, for setting up pages with proper css,just use google.

Hi Folkert,

I understand what you are trying to say. But this will still not give me the output that I need. What I'm trying to achieve is this.

Upon looking on the mark-up and css that you posted, it will render the layout for each node. But it will not achieve the layout above, it will still display all the nodes vertically. Some conditioning statement must be placed on the xslt, but that is where im having a problem.

Thank you.

Regards,
Harry

If you use float, block elements will not render vertically but horizontally. Search for google in using floats:
for example:
http://www.elated.com/articles/css-floats/

Example of float:

<div style="float: left; width: 200px; margin-right: 5px;">
  <p>
    This is our left text column.
    This is our left text column.
    This is our left text column.
  </p>
</div>

<div style="float: left; width: 200px; margin-right: 5px;">
  <p>
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
</div>

<div style="clear: both;"> </div>

I think we are not on the same page here. I understand how to use floats and block elements.

Let me explain again. I have this kind of structure:

Homepage
  Model Line Up
       Cars
           Car1
           Car2
           Car3
           Car4
       SUV
           SUV1
           SUV2
           SUV3
           SUV4

My xslt is on the Model Line Up node, what the xslt does is to display the category and the items under it. So I have a looping statement for the categories and nested in it is another looping statement for the items under it.

What I'm having problems with is iterating through the items under each category. My current xslt outputs something like this:

Cars
  Car1
  Car2
  Car3
  Car4

SUV
  Suv1
  Suv2
  Suv3
  Suv4

What I'm trying to achieve is:
Cars
  Car1      Car2
  Car3      Car4

SUV
  Suv1      Suv2
  Suv3      Suv4

My question is how can I limit the display to 2 items horizontally, when it reaches the 3rd item it displays the next 2 items on the next line. I tried to control it by using the pos() function, but I guess im missing something important.

Thank you.

Regards,
Harry 

Justmake the floats half the size of the container. a float will be placed left to the previous element. If there is no space anymore, the float will be on the next 'line'. Make sure you're clearing the floats after each list of cars, so before every category, otherwise, the categories will be rendered in the wrong flow.

You don't have to use position().

you can either limit your items to 2 horizontally by either setting your cotaining div with to be only two cars wide.

using a simplified version of Folkerts example:

<div class="cars">
<h3>Cars</h3>
  <div class="car">
  <!-- all html for car 1 contained here -->
  </div>
  <div class="car">
  <!-- all html for car 2 contained here -->
  </div>
  <div class="car">
  <!-- all html for car 3 contained here -->
  </div>
  <div class="car">
  <!-- all html for car 4 contained here -->
  </div>
</div>
<div class="suvs">
<h3>SUV</h3>
  <div class="suv">
  <!-- all html for suv 1 contained here -->
  </div>
  <div class="suv">
  <!-- all html for suv 2 contained here -->
  </div>
  <div class="suv">
  <!-- all html for suv 3 contained here -->
  </div>
  <div class="suv">
  <!-- all html for suv 4 contained here -->
  </div>
</div>

.car, .suv{width:100px; float:left; display:block;}
.cars, .suv{clear:left; width:200px}

you'd probably want to put some margins or padding in there too... but for the purpose of a demo it's fine.
the above should give you:

Cars
  Car1      Car2
  Car3      Car4

SUV
  Suv1      Suv2
  Suv3      Suv4

that should be it, unless I'm not reading you right?

Thanks Flokert and wolulcmit!

That makes sense. I'll try it out.

Again guys, thank you! I'll post again if it works for me or not.

is working on a reply...