I need to organize a group of thumbnails into two columns with four thumbnails in each column, solely using CSS. The thumbnails are all structured as follows:
<a href="..."><img /></a>
Is it possible to achieve this layout through CSS rules?
I am utilizing XSLT to generate the list of thumbnails in Umbraco using the provided script. While I can modify the script, XSLT is not my strong suit - so any guidance on either CSS or XSLT would be greatly appreciated.
Gallery.xslt:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="mediaFolderId" select="number($currentPage/mediaFolderId)" />
<xsl:variable name="thumbWidth" select="number(58)" />
<xsl:variable name="thumbHeight" select="number(58)" />
<xsl:variable name="imageW" select="number(300)" />
<xsl:variable name="imageH" select="number(300)" />
<xsl:variable name="i" select="number(-1)" />
<xsl:template match="/">
<!-- Displays all images from a folder in the Media Library -->
<xsl:if test="number($mediaFolderId)">
<ul class="bxslider">
<xsl:for-each select="umbraco.library:GetMedia($mediaFolderId, true())/Image">
<xsl:if test="umbracoFile !=''">
<li><a href="{umbracoFile}" title="{@nodeName}" class="gal"><img src="/imageGen.ashx?image={umbraco.library:UrlEncode(umbracoFile)}&width={$imageW}&height={$imageH}" width="{$imageW}" height="{$imageH}" alt="{@nodeName}" title="{@nodeName}" /></a></li>
</xsl:if>
</xsl:for-each>
</ul>
<div id="bx-pager">
<xsl:for-each select="umbraco.library:GetMedia($mediaFolderId, true())/Image">
<xsl:if test="umbracoFile !=''">
<xsl:call-template name="section" />
</xsl:if>
</xsl:for-each>
</div>
</xsl:if>
</xsl:template>
<xsl:template name="section">
<a href="javascript:void(0);" data-slide-index="{0 + count(preceding-sibling::Image)}"><img src="/imageGen.ashx?image={umbraco.library:UrlEncode(umbracoFile)}&width={$thumbWidth}&height={$thumbHeight}&=t" width="{$thumbWidth}" height="{$thumbHeight}" alt="{@nodeName}" title="{@nodeName}" /></a>
</xsl:template>
</xsl:stylesheet>