CSS and XML

[2122002]

Hi all.

I am a novice in using CSS to transform XML data. Below is my XML which I want the output to display in below layout using CSS.

XML sample:

<personal-info sex="Male" height="1.6" weight="61kg" >

<education>
<degree>Diploma in Management</degree>
<year> 2003</year>
<school>School of Business Management</school>
<location>Califonia</location>
</education>

</personal-info>

below is the output layout, but I don't have any idea of how CSS can transform it on either Opera/IE 6 browser. please help me out!

---------------------------------------------------
| Sex: Male | Height - 1.6 | Weight:61kg |
---------------------------------------------------
| <education:> |
| 1. Diploma in Management |
| 2. 2003 |
|-------------------------------------------------|
| school of buiness management, Califonia |
---------------------------------------------------

Thank you.

 

[ChrisHunt]

I don't think yu can do that degree of transformation with just CSS. You'll need to use XSLT instead/as well.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[sirlojik]

hmmm.... i haven't done this before but i think, you will have to use DOM methods to extract each node and using javascript you can incoporate CSS. i hope this makes sense, atleast i remember doing something similar when doing SVG.

---------------------------
WORD OR VOTE TO THE WISE IS ENUFF...

 

[sirlojik]

XSLT, yes that is what i was trying to think of. XSLT will work as CSS is an offspring of it.

---------------------------
WORD OR VOTE TO THE WISE IS ENUFF...

 

[2122002]

Thank you all for your quick response. However, lets have a look at below tag/declaration/namespaces as I have included in XML and below CSS I just write out now, maybe you can have clue of my request. As i have said, I am a novice and dont know much about table-layout in CSS.

Copy and save both text as "data.xml" and "data.css"

It displayed terribly bad on IE, Opera and Mozilla display it fine, but I still dont know how to format my desire layout.

Thank you again for looking into this.


XML FILE/TEXT: (save filename as: data.css)

--------------------------

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="data.css"?>
<personal-info sex="Female" height="1.6" weight="61kg" >
<education>
<degree>Diploma in Management</degree>
<year> 2003</year>
<school>School of Business Management</school>
<location>California</location>
</education>

</personal-info>

-----------------------------

CSS (save filename as: data.css)


personal-info {display: table;
border: solid 1pt black;
font-family: sans-serif;}

*personal-info {padding: 0.2em;}
personal-info:before {content: attr(sex); }

education{display:table; border: solid 1pt black;}

degree{display:table-row; border: solid 1pt black;}
year {display:table-row; border: solid 1pt black;}
school,location {display: table-row;}

 

[Foamcow]

I'm a little sketchy on this but I believe XSLT is used for creating document templates into which the XML data is flowed.

So you would use XSLT to transform your XML document into another type of document... such as an XHTML document, which can then be styled using CSS if necessary.


Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Foamcow]

Here is what I just came up with... bear in mind I don't really know XML/XSLT and this may be the wrong way to go about it...

I also haven't figured out how to get the attributes out of personal-info


We have 3 files.
The XML as you posted with a slight change to call the XSL

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="styles.xsl"?>
<personal-info sex="Female" height="1.6" weight="61kg" >
<education>
   <degree>Diploma in Management</degree>
   <year> 2003</year>
   <school>School of Business Management</school>
  <location>California</location>
</education>

</personal-info>

Then we have the XSLT which will transform the XML document into XHTML.
Called styles.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="[URL unfurl="true"]http://www.w3.org/1999/XSL/Transform">[/URL]

<xsl:template match="/">
  
  <html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
  <head>
  <title>test</title>
  <link rel="stylesheet" type="text/css" href="css.css" media="screen" />
  </head>
  
  <body>

  <xsl:for-each select="personal-info">
    <table>
    <tr>
      <th align="left">Degree</th>
      <th align="left">Year</th>
      <th align="left">School</th>
      <th align="left">Location</th>
    </tr>
    
    <tr>
      <td><xsl:value-of select="education/degree"/></td>
      <td><xsl:value-of select="education/year"/></td>
      <td><xsl:value-of select="education/school"/></td>
      <td><xsl:value-of select="education/location"/></td>
    </tr>
    </table>
  </xsl:for-each>
   
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

Finally the CSS file that styles the XHTML document we just made
called css.css

table {
	border:1px solid black;
	border-collapse:collapse;
}

td, th {
	padding:8px;
	border:1px solid black;
}

The last bit kind of depends on how you want to style the table.

Like I said, this may be the "long way round" and there may well be an easier way to directly style the XML file. However it's my understanding that while XML holds the data, it needs to be transformed into some other kind of document using XSLT. In our case we want an XHTML file, which we can then style with CSS.
Someone please correct me if I'm wrong.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Foamcow]

Aha, I figured out how to get the attribute values from an element....
Example, in the XSLT file

<p><xsl:value-of select="@sex"/></p>

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[ChrisHunt]

Including this line before the [tt]<xsl:template match="/">[/tt] will get it to output html with a full doctype:

<xsl:output method="html" encoding="iso-8859-1" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"
 doctype-system="[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd"/>[/URL]

Oddly, I couldn't find a way to get XHTML without stuff like an XML prolog (which will confuse some browsers).

XL is hard work to get your head round, and there's no guarantee that browsers will understand it when they get it. So if this is to be a public site, you'd be better off doing the transformation server-side.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd