Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • suzyb 474 posts 932 karma points
    Jun 07, 2011 @ 22:55
    suzyb
    0

    Multi column layout including sub items

    I want to make a multi column list that lists all items and sub items of a "sector" type.  The structure is something like this

    sector
    -- sector
    -- sector
    -- sector
    sector
    sector
    -- sector
    -- sector

    I'd like all the sectors to be shown in 3 equal length (or as equal as they can be) columns but I don't know where to start.  Normally I would just use a ul with a set width and float the li.  However as all the main sectors can have different numbers of sub sectors this doesn't work.

  • dalton 14 posts 34 karma points
    Jun 08, 2011 @ 15:03
    dalton
    0

    It depends how do you want the colums to look. Do you want them to be side by side or one on top of the other?Then I could help you. Also are you doing them all in one table or seprate tables?

    If you want them side by side and equal length you'll need to give them a height attribute and also you may have to do a vertical-align to make sure the tops are at an even level

  • suzyb 474 posts 932 karma points
    Jun 08, 2011 @ 16:17
    suzyb
    0

    The design has changed slightly so there is now no distinguation between sectors and sub sectors which makes it a bit easier to code.  I found this thread and the solution by kmacdonell works for the time being.

    The other solution which seems cleaner doesn't seem to work however and I'm curious as to why.  Here is my slightly modified version of it.  If anyone knows what is wrong, could you explain, thanks.

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:google.maps="urn:google.maps"
    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 google.maps 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="level" select="6" />

    <!-- selecting setors at level 3 should make sure we only get the top level sectors -->
    <xsl:variable name="sectorNodes" select="$currentPage/ancestor-or-self::root//Sector[@isDoc and @level &lt;= $level]"/>

    <xsl:template match="/">

    <xsl:variable name="countRows" select="floor(count($sectorNodes) div 3)" />

    <xsl:for-each select="$sectorNodes [position() mod $countRows = 1]">
    <ul>
    <xsl:apply-templates select=".|following-sibling::node[position() &lt; $countRows]" />
    </ul>
    </xsl:for-each>
    </xsl:template>

    <xsl:template match="node">
    <li>
    <a href="{umbraco.library:NiceUrl(@id)}">
    <xsl:value-of select="@nodeName"/>
    </a>
    </li>
    </xsl:template>


    </xsl:stylesheet>
Please Sign in or register to post replies

Write your reply to:

Draft