Meddelande

Minska
No announcement yet.

Formatera en xml-fil med css

Minska
X
  • Filter
  • Klockan
  • Show
Clear All
new posts

  • 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)>

    [/HTML]

    [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>

    [/HTML]

    [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-large; font-weight:bold;}
    titel {display:block; font-sizearge; font-weight:bold;}
    omfattning, pris, publik, extra, beskrivning {display:block;}
    [/HTML]

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

    Hur får jag fram den informationen?

    // Jompan

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

    CSS-Exempel:
    [KOD]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) ;
    }
    [/KOD]

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

    Kommentera


    • #3
      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 ";
      }

      Kommentera


      • #4
        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.
        [kod]
        link:before {
        content: attr(url) " Västra Sörmlands Kultur- och Guideförening ";
        }[/kod] 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 [kod]<?xml-stylesheet type="application/xslt+xml" href="transformeramera.xslt"?>[/kod] 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>
        jarvklo.se

        Kommentera


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

          // Jompan

          Kommentera

          Working...
          X