Solved

XSLT 2 column layout

Posted on 2010-09-17
4
474 Views
Last Modified: 2013-11-18
Hello,

I am new to XSL formatting. Thanks for your help in advance.

I have this XML file that I am trying to convert using xslt.

I have grouped the xml data into group by section.

The issue that I have is i am getting the results in a single column .
I would like to get in a 2 column layout.

I am attaching the xsl file that I am working on.

xml:
<Collection>
 <Content>
    <ID>100</ID>
    <Type>Content</Type>
    <Title>English test</Title>
    <QuickLink>http://google.com</QuickLink>
    <Html>
      <root>
        <issueDate>2010-08-15</issueDate>
        <BodyTitle>test</BodyTitle>
        <section>English</section>
              </root>
    </Html>
    <StartDate>1/1/2010</StartDate>

  </Content>
  <Content>
    <ID>101</ID>
    <Type>Content</Type>
    <Title>Physics Test</Title>
    <QuickLink>http://yahoo.com</QuickLink>
 
    <Html>
      <root>
        <issueDate>2010-08-31</issueDate>
        <BodyTitle>Physics In Brief</BodyTitle>
       
        <section>Physics</section>
       
      </root>
    </Html>
    <StartDate>1/1/2010</StartDate>

  </Content>
  <Content>
    <ID>102</ID>
    <Type>Content</Type>
    <Title>French</Title>
    <QuickLink>http://xml.net</QuickLink>
   
    <Html>
      <root>
        <issueDate>2010-08-31</issueDate>
        <BodyTitle>French rules</BodyTitle>
        <section>French</section>
     
      </root>
    </Html>
    <StartDate>1/1/2010</StartDate>

  </Content>
 
 
</Collection>


I am attaching the xsl file that I am working on .

testxsl.txt
0
Comment
Question by:all_experts
  • 2
  • 2
4 Comments
 
LVL 3

Expert Comment

by:VeganBen
ID: 33707557
You're outputting to HTML, so why not use the browser to sort out column widths.

Wrap everything in a DIV called twoColumns and add this to your CSS:


div#twoColumns {
      -moz-column-count: 2;
      -moz-column-gap: 20px;
      -webkit-column-count: 2;
      -webkit-column-gap: 20px;
      column-count: 2;
      column-gap: 20px;
}
0
 
LVL 1

Author Comment

by:all_experts
ID: 33713528
Hello VeganBen,

Thanks for your help.I have tried using your code but still it is not rendering the list properly.

It is a css 3 property and still not being implemented in the browsers.

Correct me if I am wrong.,
0
 
LVL 1

Accepted Solution

by:
all_experts earned 0 total points
ID: 33719256
Hello VeganBen,

Thanks for the help I was able to get that using xsl:attribute
0
 
LVL 3

Expert Comment

by:VeganBen
ID: 33741347
Glad you got it working.
It is a CSS property that is supported by Firefox, Safari and Chrome.

Oh, you mean IE? Do you count that as a web browser?
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Some high points and examples of what's great about Facebook React? 5 120
Specific format 21 182
Questions about this React unit test 4 45
Convert XML to excel12book 5 25
Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now