?
Solved

XSLT 2 column layout

Posted on 2010-09-17
4
Medium Priority
?
513 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

771 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