homepage Welcome to WebmasterWorld Guest from 54.227.40.166
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / XML Development
Forum Library, Charter, Moderators: httpwebwitch

XML Development Forum

    
XML with CSS Formatting
taemurz




msg:3370356
 7:15 pm on Jun 17, 2007 (gmt 0)

Hi All

I am new to this forum and need some urgent help. In fact, any help would be greatly appreciated!

I am doing a university degree and this is part of my current assignment on XML formatting using CSS.

It has baffled me for the past week and having Googled, asked around ..etc I have a major problem in that no one seems to like the idea of using CSS with XML. Couple that with lack of any detailed websites on using CSS with XML.

Having asked some guys at work they seem more interested in XSLT than CSS but I still need to do this assignment or else ...

Basically, I am given a simple XML file (sample-request2.txt - see end of email) and we are asked to format it according to the SUMMARY DISPLAY and FULL DISPLAY layouts according to the specification (See section Format Layout.html below)

My biggest problem is how to specify the CSS attributes for the following attributes:

customer-reference, customer-name and request-reference

I have tried doing the following:

<code>product-availability-request.customer-reference {
.
.
.
}</code>

IT DOES NOT WORK!

<code>product-availability-request[customer-reference] {
.
.
.
}</code>

IT DOES NOT WORK!

In fact when I did the following CSS :

<code>/* This .CSS file is used with sample-request2.xml file */

product-availability-request {
display: block;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 12pt;
background-color: white;
color: blue;
}

product-availability-request[customer-reference] {
color: red;
}</code>

All I get is the following :

15/12/2006 17/12/2006 UK Essex SS15 6EE Technical Centre, Laindon, SS15 6EE Special order for alloy wheels to go on new RS model under development 100 17" RSR Shadow Chrome 17" Hybrid Shadow Chrome 15" Hybrid Shadow Chrome 300.00 200.00

Which as you can see does not include the contents of the 3 attributes that I've mentioned (customer-reference, customer-name and request-reference).

This is meant to be a simple CSS formatting but so far I have not even begun the race!

As I said, ANY help (references to other websites, forums ..etc) would be greatly appreciated.

Kind Regards

Zak

-----------------------
sample-request2.txt
-----------------------

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="request-summary.css"?>
<product-availability-request customer-reference="RDD" customer-name="Sports Development" request-reference="RS/2005/172">
<time-period>
<start-date>15/12/2006</start-date>
<end-date>17/12/2006</end-date>
</time-period>
<delivery-location>
<location>
<country>UK</country>
<state>Essex</state>
<post-code>SS15 6EE</post-code>
<address>Technical Centre, Laindon, SS15 6EE</address>
</location>
</delivery-location>
<description>Special order for alloy wheels to go on new RS model under development</description>
<quantity>100</quantity>
<product-preference type="preferred">
<product ref="7017RSRSC" img="7017rsrsc.jpg">17" RSR Shadow Chrome</product>
</product-preference>
<product-preference type="not">
<product ref="7017HYBRID">17" Hybrid Shadow Chrome</product>
<product ref="6515HYBRID"> 15" Hybrid Shadow Chrome</product>
</product-preference>
<price-preference type="max">
<price currency="GBP">300.00</price>
</price-preference>
<price-preference type="min">
<price currency="GBP">200.00</price>
</price-preference>
</product-availability-request>

-----------------------
Format Layout.html
-----------------------

This assessment is based on product availability information that Ms. Y might use within her business. Two client briefs are provided below that outline how Ms. Y would like to see data displayed. A sample availability request for use in this assignment is available on StudyNet in the file sample-request.xml.
Client Brief - Summary Display
Ms Y. would like to provide a minimal display of requests for information (RFIs) on product availability for use in listings or by stock pickers in warehouses via their mobile phones, PDAs or other small screen devices. Given screen display (and/or bandwidth) may be limited, the following subset of available information should be shown for each product availability . The information should be laid out with the borders shown below. The data descriptions in square brackets should be replaced with the relevant data from the sample RFI contained in the sample-request.xml file.

RFI - #[request-reference] - for [customer-name] ([customer-reference])
Delivery Period: start: [start-date] end: [end-date]
Delivery Location: [country] - [code]
Products
[list of product information including the following for each product:
[preference-type] - [product ref] ([product name])
]

Price ([currency]): [price-preference type] [price]

The fonts should be a sans-serif font such as Arial or Helvetica, and the template above is an approximate indication of relative size and style. Where a request contains more than one price preference then they should both be shown on the same line, e.g. min 100 max 125.
Client Brief - Full Display
Ms. Y would also like to provide a more detailed description of product availability requests as shown below. This includes product pictures (for verifying the correct product codes have been used) and a description of the use for the product.

RFI: for [customer-name] ([customer-reference])
#[request-reference]
Delivery: Location [code] - [state, country]
[address]
Date [start-date] to [end-date]

Product Specification
[description]
Quantity: [quantity]
Price ([currency]): [price-preference type] [price]
[list of product information including the following for each product:
[image "NOT"] [product ref] ( [product name] )


Restrictions on products and prices should be highlighted as follows. Maximum prices should be shown in bold red text. Minimum price requirements (i.e. where price-preference type="min") should be shown in underlined, italic blue text.

The image for each desired product (i.e. where product-preference type="preferred" or "only") should be included as shown above. For product exclusions (i.e. where product-preference type="not"), the text "NOT" should be included instead as red, bold text.

Assessment 2.3 Sample Data
The following data should be used in task 2 of Assessment 2.3 to test the form you have created in task 1.

start-date
8/19/2007
end-date
8/21/2007
country
UK
post-code
SS15 6EE
quantity
140
product-reference
7016RSRSC
product-preference-type
preferred
price-preference-value
310
price-preference-currency
GBP
price-preference-type
min


 

cmarshall




msg:3370368
 7:39 pm on Jun 17, 2007 (gmt 0)

Well, whenever you use XHTML with the "Coding to Standards" approach, you are using XML with CSS. XHTML is a flavor of XML.

I do this stuff all the time, but I always render the XML as a variant the browser can understand (either XHTML, or browser-rendered XSLT that creates XHTML).

CSS is worthless unless you have a rendering engine that can understand it (browsers and webkits).

For JavaScript and CSS, which are not XHTML, I generally use <![CDATA[...]]> [w3schools.com] sections.

Maybe this is what you are looking for?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / XML Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved