Solved

XSLT 2 column layout

Posted on 2010-09-17
4
461 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
Comment Utility
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
Comment Utility
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
Comment Utility
Hello VeganBen,

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

Expert Comment

by:VeganBen
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

772 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

11 Experts available now in Live!

Get 1:1 Help Now