Formatera en xml-fil med css

Jag har knåpat ihop dessa koder:

[DTD-kod]
<!ELEMENT guidningar (vskg, program+, beskrivning+)>
<!ELEMENT vskg (namn, link)>
<!ELEMENT namn (#PCDATA)>
<!ELEMENT link EMPTY>
<!ATTLIST link url CDATA #REQUIRED>
<!ELEMENT program (titel, omfattning+, pris+, publik?, extra?)>
<!ATTLIST program typ (dramatiserad | traditionell) #REQUIRED>
<!ATTLIST program mobil (promenad | buss) #REQUIRED>
<!ELEMENT titel (#PCDATA)>
<!ELEMENT omfattning (timmar+, antal+)>
<!ELEMENT timmar (#PCDATA)>
<!ELEMENT antal (#PCDATA)>
<!ELEMENT pris (#PCDATA)>
<!ELEMENT publik (maxantal+, minantal+)>
<!ELEMENT maxantal (#PCDATA)>
<!ELEMENT minantal (#PCDATA)>
<!ELEMENT extra (#PCDATA)>
<!ELEMENT beskrivning (#PCDATA)>

[XML-kod]
<guidningar>
<vskg>
<namn>Västra Sörmlands Kultur- och Guideförening</namn>
<link url="http://www.vskg.nu/guider.php/" />
</vskg>

\<program typ="dramatiserad" mobil="buss"\>
	\<titel\>Spökbussen\</titel\>
	
	\<omfattning\>
		\<timmar\>3\</timmar\>
		\<antal\>10\</antal\>
	\</omfattning\>	
	
	\<pris\>175\</pris\>
	
	\<publik\>
		\<maxantal\>30\</maxantal\>
		\<minantal\>15\</minantal\>
	\</publik\>
	
	\<extra\>Förtäring\</extra\>
\</program\>

\<beskrivning\> xxxxxxxxxxxx \</beskrivning\>	

</guidningar>

[CSS-kod]
guidningar {width:800px; margin:40px auto; border:1px solid black; padding:30px;}
vskg, program, beskrivning {display:block; margin:1ex 0; }

program, typ, mobil {display:block;}
namn{display:block; font-size:x-large; font-weight:bold;}
titel {display:block; font-size:large; font-weight:bold;}
omfattning, pris, publik, extra, beskrivning {display:block;}

Problemet är att sidan visar inte alternativen 'dramatiserad' och 'buss' under programtyp för ATTLIST.

Hur får jag fram den informationen?

// Jompan

Hmm
Du kan t.ex. använda pseudo-attributen ::before eller ::after tillsammans med content: och attr()...

CSS-Exempel:

program {display:block; border:10px solid #abcdef;} /* kraftig ram för att illustrera */
/* Ledtext följt av ett värde */
    program::before {
        content: 'Typ: ' attr(typ) ;
    }
/* Flera värden och ledtexter */
    program::after {
        content: 'Typ: ' attr(typ) ' - Mobil: ' attr(mobil) ;
    }

Läs mer på t.ex. http://css-tricks.com/css-content/

Tack, det blev ju helt perfekt.
Men så upptäcker jag ännu en skavank: hur kodar jag i CSS för att få fram länken som jag hänvisar till under XML-koden?
Jag försökte så här, men det blev inte så framgångsrikt.

a:before {
content: attr(link url) "Västra Sörmlands Kultur- och Guideförening ";
}

Hmm - du har inget element som heter "a" i din dokumenttyp så den där CSS-selektorn har liksom inget den *kan* "hitta" i din dokumentstruktur ;)

Det du kan göra i CSS är alltså att ta ut värdet (som text) ur det element du selekterat.

link:before {
content: attr(url) " Västra Sörmlands Kultur- och Guideförening ";
}

men du kan inte selektera "hierarkiskt" inne i attr() i CSS eftersom det som står inne i parentesen tolkas som ren text enligt spec.

Vill du börja ändra elementens namn i DOM-trädet, skjuta in a-element i DOM-trädet för att skapa länkar, eller kanske tillochmed få ut informationen ur ditt dokument i en helt annan ordning än i originalfilen är det XSLT som gäller (och en XSLT-mall *kan* generera ett HTML-träd komplett med en en regel som petar in en <link rel="stylesheet" ... > om du vill kombinera dem).

dvs kör du med

<?xml-stylesheet type="application/xslt+xml" href="transformeramera.xslt"?>

istället för att koppla in en css-fil så kan du välja att transformera en <link url="xxx" /> i ditt dokument/din DTD till en <a href="xxx"...>...</a>

Utmärkt!
Tack och bock för hjälpen.

// Jompan