How do display a CMS collection in an ASP.net page

Question

articleDisplayThumb XSLT file (Use the DynamicParameter ID to go through the collection):

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="homeArticleThumb" match="/">
  <xsl:for-each select="Collection/Content">
    <div class="col span_1_of_3" style="height: 150px; border: 1px solid black;">
      <div class="test2">
        <div style="float: left; width: 28% padding-right: 2%; height: 100%;">
          {DISPLAY THE IMAGE HERE AND MAKE IT LINK TO THE ARTICLE} --> artThumbImg

        </div>
        <div style="float: left; width: 58%; height: 100%;">
          <div style="width: 100%; height: 48%; padding-bottom: 2%;">
            {DISPLAY THE TITLE AND LINK HERE} --> artTitle

          </div>
          <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap;">
            {DISPLAY THE TEXT WITH "..." Here} --> partial artText (a Teaser...)

          </div>
        </div>
      </div>
    </div>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

The CSS for the classes above (I am trying to make it responsive to screen size, using this example: http://jsfiddle.net/Lry4z15m/2/):

/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 98%;
    }
}

I am calling the above from my ASP.net page like this:

<CMS:ContentBlock ID="CB" runat="server" DynamicParameter="127" CssClass="setP" DisplayXslt="Workarea/CustomFiles/articleDisplayThumb.xsl" />

The collection with ID 127 looks like this (The link for the title will have to be something like this: mypage?linkit={ID} where the ID is for each article when clicked):

What I would like it to end up, like this (The image on the left is artThumb, the blue is the artTitle and the black is the artText):

The XPaths:

How can I complete the XSLT, so I can achieve the end result, with the same style as the one used in JSFiddle?

UPDATE:

Did this so far...

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="homeArticleThumb" match="/">
  <xsl:for-each select="Collection/Content">
    <div class="col span_1_of_3" style="height: 150px; border: 1px solid black;">
      <div class="test2">
        <div style="float: left; width: 28% padding-right: 2%; height: 100%;">
          <xsl-copy-of select="/root/NewArticle/artThumb" />
        </div>
        <div style="float: left; width: 58%; height: 100%;">
          <div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;">
            <a href=""><xsl:value-of select="/root/NewArticle/artTitle" /></a>

          </div>
          <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">
            <xsl:value-of select="/root/NewArticle/artText" />

          </div>
        </div>
      </div>
    </div>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Answer 1

Instead of using the ContentBlock server control, try using the Collection server control:

The following may help.

<CMS:Collection ID="Collection1" runat="server" DefaultCollectionID="127" CssClass="setP" DisplayXslt="Workarea/CustomFiles/articleDisplayThumb.xsl" />

Answer 2

I would actually recommend against the collection control and opt for the the content view templated control which allows for filtering on collections as well. This should work in versions 8.6 and up and is much easier to style than using an xslt as it uses standard asp.net and c# markup.

Documentation on this control can be found here. http://documentation.ektron.com/cms400/edr/web/edr.htm#Templated_Server_Controls/Content.htm%3FTocPath%3DTemplated%2520Server%2520Controls%7C_____2