dominik: XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

SELF-Forum

XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

dominik
– Informationen zu den Bewertungsregeln

Hi!
Ich hab nen Problem bei ner Aufgabe für die Uni. Ist das erste mal, dass ich überhaupt Kontakt mit Webdesing habe, deswegen hoffe ich, dass mir jemand helfen kann :)

Bei dieser Datei...
http://nemesis.hungry-voiz.de/notenliste2.xml

...wird die Tabelle nicht richtig dargestellt.
Der weiße Hintergrund sollte eigentlich zu der Tabelle gehören, ist aber irgendwie nur in der Überschrift. Ausserdem läuft es sowieso nur mit dem IE einigermaßen. FF zeigt keine Farben, mit Opera gehts garnicht.
Vielleicht findet ihr ja den Fehler, ich such jetzt schon sehr lange..

XSL-Datei:

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"   >

<xsl:template match="/">
<html>
<head>
  <title>Notenliste</title>
  <link rel="stylesheet" type="text/css"  href="notenliste.css" />

</head>
<body>
  <h1><xsl:value-of select="notenliste/prüfungsfach"/></h1>
  <hr/>
  <table>
    <tr>
     <th>lfdNr</th>
     <th>Matrikelnummer</th>
     <th>Nachname</th>
     <th>Vorname</th>
     <th>Versuch</th>
     <th>Note</th>
     <th>Bemerkung</th>
    </tr>
   <xsl:apply-templates select="notenliste/teilnehmer">
    <xsl:sort select="lfdNr" data-type="number"/>
   </xsl:apply-templates>

</table>
</body>
</html>
</xsl:template>

<xsl:template match="teilnehmer">
  <tr>
   <td><xsl:value-of select="lfdNr" />
   </td>
   <td><xsl:value-of select="matrikelnummer" />
   </td>
   <td><xsl:value-of select="nachname" />
   </td>
   <td><xsl:value-of select="vorname" />
   </td>
   <td><xsl:value-of select="versuch" />
   </td>
   <td><xsl:value-of select="note" />
   </td>
   <td>
   xsl:choose
  <xsl:when test="bemerkung!=''">
  <xsl:value-of select="bemerkung" />
  </xsl:when>
  xsl:otherwise &#160; </xsl:otherwise>
 </xsl:choose>
   </td>
  </tr>
</xsl:template>

</xsl:stylesheet>

CSS-Datei:

body
 { background-color: EEFFDD;
  color: black;
  font-family:'Times New Roman',Times,serif;
  font-size: small;
 }

div
 { float: left;
  background-color: DDEECC;
  border:1px solid black;
  margin-left:10 px;
  margin-top:10 px;
  padding: 2 px;
 }

h1
 { text-align:center;
  font-size:xx-large;
 {

table
 { border:1px solid black;
  padding:1px;
  background:WHITE;
 }

th
 { background: BBCCAA;
  border:1px solid black;
  padding:1px;
 }

td
 {  border:1px solid black;
  padding:1px;
  background:DDEECC;
 }

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    Bei dieser Datei...
    http://nemesis.hungry-voiz.de/notenliste2.xml

    Verweise einbinden.

    Und nein, das ist keine Datei, sondern eine Ressource.

    XSL-Datei:
      <link rel="stylesheet" type="text/css"  href="notenliste.css" />

    Daraus wird im Firefox (aus dem Browser als HTML speichern, im Texteditor öffnen; oder geht das einfacher?):

    <link href="notenliste2.xml-Dateien/notenliste.css" type="text/css" rel="stylesheet">

    Daraus wird also der URI zum Stylesheet 'link:http://nemesis.hungry-voiz.de/notenliste2.xml-Dateien/notenliste.css', den der Server mit "404 Not Found" beantwortet. Kein Stylesheet, keine Farbe ...

    Warum der Firefox da noch "notenliste2.xml-Dateien/" einfügt, weiß ich auch nicht. Hilft es, den Link im XSLT absolut 'http://nemesis.hungry-voiz.de/notenliste.css' anzugeben?

    Nanu, immer noch keine Farben? Du machst ja auch keine gültigen Farbangaben:

    CSS-Datei:
    body
    { background-color: EEFFDD;

    Das ist keine, '#EEFFDD' wäre eine.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

      Thomas J.S.
      – Informationen zu den Bewertungsregeln

      Hallo,

      XSL-Datei:
        <link rel="stylesheet" type="text/css"  href="notenliste.css" />

      Daraus wird im Firefox (aus dem Browser als HTML speichern, im Texteditor öffnen; oder geht das einfacher?):

      <link href="notenliste2.xml-Dateien/notenliste.css" type="text/css" rel="stylesheet">

      Daraus wird also der URI zum Stylesheet 'link:http://nemesis.hungry-voiz.de/notenliste2.xml-Dateien/notenliste.css', den der Server mit "404 Not Found" beantwortet. Kein Stylesheet, keine Farbe ...

      Nein, wird es nicht. (STRG+A --> Kontextmenü --> "View selection source";
      oder einfach "View Page Info" und dann auf "Links" klicken)
      Welchen kapputen FF hast du denn?

      Warum der Firefox da noch "notenliste2.xml-Dateien/" einfügt, weiß ich auch nicht. Hilft es, den Link im XSLT absolut 'http://nemesis.hungry-voiz.de/notenliste.css' anzugeben?

      Weil er beim speicher auf die Festplatte automatisch ein Verzeichnis "notenliste2.xml-Dateien" erstelln in dem er die untergeordnete Dateien speichert.

      Es würde sich lohnen ein "xsl:output" mit DOCTYPE-Angabe zu machen.

      Nanu, immer noch keine Farben? Du machst ja auch keine gültigen Farbangaben:

      Das stimmt allerdings.

      Grüße
      Thomas

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

        Dominik
        – Informationen zu den Bewertungsregeln

        Hi,

        Danke für die schnellen Antworten!
        Ich hab versucht die Dateien dementsprechend abzuändern, aber das Ergebniss ist immernoch nicht zufriedenstellend.
        Im IE sieht es noch genauso aus. Im Firefox gibt es nun Farbe, aber dafür ist alles total zusammengeschoben.

        Link(ich hoffe diesmal richtig):
        http://nemesis.hungry-voiz.de/notenliste2.xml

        Hier mal der Quellcode:

        XML-Datei:

          
<?xml version="1.0" encoding="UTF-8"?>  
<?xml-stylesheet type="text/xsl" href="notenliste2.xsl" ?>  
<notenliste xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="notenliste.xsd">  
 <prüfungsfach>Theoretische Informatik</prüfungsfach>  
 <bemerkung>goldammer/patzelt</bemerkung>  
 <teilnehmer>  
  <lfdNr>5</lfdNr>  
  <matrikelnummer>700000</matrikelnummer>  
  <nachname>dominik</nachname>  
  <vorname>steinweg</vorname>  
  <versuch>1</versuch>  
  <note>5.0</note>  
  <bemerkung/>  
 </teilnehmer>  
 <teilnehmer>  
  <lfdNr>3</lfdNr>  
  <matrikelnummer>799999</matrikelnummer>  
  <nachname>mustermann</nachname>  
  <vorname>max</vorname>  
  <versuch>1</versuch>  
  <note>3.3</note>  
  <bemerkung/>  
 </teilnehmer>  
 <teilnehmer>  
  <lfdNr>1</lfdNr>  
  <matrikelnummer>700001</matrikelnummer>  
  <nachname>mustermann</nachname>  
  <vorname>maria</vorname>  
  <versuch>2</versuch>  
  <note>1.0</note>  
  <bemerkung>PFV</bemerkung>  
 </teilnehmer>  
 <teilnehmer>  
  <lfdNr>4</lfdNr>  
  <matrikelnummer>752012</matrikelnummer>  
  <nachname>doe</nachname>  
  <vorname>john</vorname>  
  <versuch>3</versuch>  
  <note>1.7</note>  
  <bemerkung/>  
 </teilnehmer>  
 <teilnehmer>  
  <lfdNr>2</lfdNr>  
  <matrikelnummer>741201</matrikelnummer>  
  <nachname>doe</nachname>  
  <vorname>jane</vorname>  
  <versuch>2</versuch>  
  <note>3.3</note>  
  <bemerkung/>  
 </teilnehmer>  
</notenliste>

        XSL:

          
<?xml version="1.0" encoding="UTF-8" ?>  
<xsl:stylesheet version="1.0"  
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"   >  
<xsl:output method="xml" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>  
<xsl:template match="/">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>  
  <title>Notenliste</title>  
  <link rel="stylesheet" type="text/css"  href="notenliste.css" />  
  
</head>  
<body>  
  <h1><xsl:value-of select="notenliste/prüfungsfach"/></h1>  
  <hr/>  
  <table>  
    <tr>  
     <th>lfdNr</th>  
     <th>Matrikelnummer</th>  
     <th>Nachname</th>  
     <th>Vorname</th>  
     <th>Versuch</th>  
     <th>Note</th>  
     <th>Bemerkung</th>  
    </tr>  
   <xsl:apply-templates select="notenliste/teilnehmer">  
    <xsl:sort select="lfdNr" data-type="number"/>  
   </xsl:apply-templates>  
  
  </table>  
</body>  
</html>  
</xsl:template>  
  
<xsl:template match="teilnehmer">  
  <tr>  
   <td><xsl:value-of select="lfdNr" />  
   </td>  
   <td><xsl:value-of select="matrikelnummer" />  
   </td>  
   <td><xsl:value-of select="nachname" />  
   </td>  
   <td><xsl:value-of select="vorname" />  
   </td>  
   <td><xsl:value-of select="versuch" />  
   </td>  
   <td><xsl:value-of select="note" />  
   </td>  
   <td>  
   <xsl:choose>  
  <xsl:when test="bemerkung!=''">  
  <xsl:value-of select="bemerkung" />  
  </xsl:when>  
  <xsl:otherwise> &#160; </xsl:otherwise>  
 </xsl:choose>  
   </td>  
  </tr>  
</xsl:template>  
  
</xsl:stylesheet>

        CSS:

          
body  
 { background-color: #eeffdd;  
  color: black;  
  font-family:'Times New Roman',Times,serif;  
  font-size: small;  
 }  
  
div  
 { float: left;  
  background-color: #ddeecc;  
  border:1px solid black;  
  margin-left:10 px;  
  margin-top:10 px;  
  padding: 2 px;  
 }  
  
h1  
 { text-align:center;  
  font-size:xx-large;  
 {  
  
table  
 { border:1px solid black;  
  padding:1px;  
  background:white;  
 }  
  
th  
 { background: #bbccaa;  
  border:1px solid black;  
  padding:1px;  
 }  
  
td  
 {  border:1px solid black;  
  padding:1px;  
  background: #ddeecc;  
 }

        Ich habe die Farben geändert und <xsl:output ...> eingefügt. Wobei ich mir bei letzterem nicht 100% sicher bin, habe mir die information aus dem netz zusammengesucht. Den Link absolut hinzuschreiben hat übrigens nichts geändert.
        Das Problem (auf den IE bezogen) ist also weiterhin, dass die Tabelle nicht richtig formatiert wird, sondern stattdesssen die werte auf die überschrift bezogen werden.
        Wäre echt super, wenn ihr mir weiterhelfen könntet. Ich zweifel so langsam an meinem Verstand..

        Grüße,
        Dominik

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

          Thomas J.S.
          – Informationen zu den Bewertungsregeln

          Hallo,

          Danke für die schnellen Antworten!
          [...] Im Firefox gibt es nun Farbe, aber dafür ist alles total zusammengeschoben.

          Kein wunder ;-)
              |
              |
             \ /
              °

          CSS:

          [code lang=css]
          body
          { background-color: #eeffdd;
            color: black;
            font-family:'Times New Roman',Times,serif;
            font-size: small;
          }

          du hast zwar keinen div im HTML, aber OK:

          div
          { float: left;
            background-color: #ddeecc;
            border:1px solid black;
            margin-left:10 px;

          ^^^

          margin-top:10 px;

          ^^^

          Mache bitte keine Leerzeichen zwischen den Zahlen und "px".

          padding: 2 px;

          }

          h1
          { text-align:center;
            font-size:xx-large;
          {

          ^^^^
              }

          Ich habe die Farben geändert und <xsl:output ...> eingefügt. Wobei ich mir bei letzterem nicht 100% sicher bin, habe mir die information aus dem netz zusammengesucht.

          http://de.selfhtml.org/xml/darstellung/xsltelemente.htm#output

          Du solltest noch das omit-xml-declaration="yes" angeben, sonst ist der IE am Ende verwirrt.

          Wenn du noch die paar Tippfeler im CSS korrigierst, klappt es auch mit dem Nachbar(in) ... ehm ... Firefox ;-)

          Grüße
          Thomas

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

            dominik
            – Informationen zu den Bewertungsregeln

            Danke! Du rettest grade meinen Tag! :)

            Ich hab die Fehler korrigiert, im IE ist jetzt auch so, wie es sein soll.
            Im Firefox werden allerdings alle Datensätze in die erste Spalte geschrieben. Scheint also an der XSL-Datei zu liegen!?

            Das div-element ist übrigens in der CSS-Datei, da ich noch eine zweite XML + XSL-Datei habe. Dort werden die Daten nicht in einer Tabelle abgelegt, sondern in Blöcken. Allerdings werden bei diesen im Firefox die Zeilenumbrüche ignoriert.

            Ich werd mich jetzt nochmal ein wenig drum kümmern, wenn ichs nicht mehr hinkriege präsentiere ich morgen halt nur im IE.

            Danke nochmal!

            Grüße,
            Dominik

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

              Gunnar Bittersmann Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hello out there!

              Im Firefox werden allerdings alle Datensätze in die erste Spalte geschrieben. Scheint also an der XSL-Datei zu liegen!?

              Die ist in Ordnung, das generierte HTML stimmt ja (bis auf die falsche Sprachangabe).

              Scheint ein Bug im Firefox zu sein. Wenn du den generierten Quelltext als HTML-Datei abspeicherst und diese dann mit dem Stylesheet anzeigen lässt, ist die Darstellung richtig.

              See ya up the road,
              Gunnar

              --
              „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

            2. XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

              Thomas J.S.
              – Informationen zu den Bewertungsregeln

              Hallo,

              Ich hab die Fehler korrigiert, im IE ist jetzt auch so, wie es sein soll.
              Im Firefox werden allerdings alle Datensätze in die erste Spalte geschrieben. Scheint also an der XSL-Datei zu liegen!?

              Wie Gunnar sagte: das XSL ist in Ordnung.

              Was mir einfällt, versuche statt xsl:output XML und XHTML-DTD mal das gute alte HTML 4.01 zu nehmen.
              sonst würde ich auch sagen, dass das ein Bug im FF ist.

              Grüße
              Thomas

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

                Dominik
                – Informationen zu den Bewertungsregeln

                Hi!

                Vorgabe ist leider XHTML 1.1
                Ich werd meiner Professorin morgen zeigen, dass es ok ist, wenn man den Quelltext kopiert. Aber wenn ichs geschickt anstelle, muss ich es vielleicht eh nur im IE präsentieren. Hauptsächlich wirds sowieso mehr um das XML-Schema dahinter gehen und das ist in Ordnung :)

                Also ich bedanke mich nochmal. Ohne euch würd ich jetzt immernoch nach der Klammer suchen ;)

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

        2. XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hello out there!

          XML-Datei:
          XSL:

          Eigentlich irrelevant, da das Problem ja bei der Darstellung des generierten HTML auftritt, da ist die Transformation längst erfolgreich(!) gelaufen. Relevant wäre der generierte HTML-Quelltext.

          Aber wo’s schonmal da ist:

          <xsl:output method="xml" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>

          Von XHTML 1.1 ist abzuraten (Gründe tausendfach im Archiv zu recherchieren); benutze XHTML 1.0 Strict.

          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

          Der Inhalt ist nicht "en", sondern "de"; für XHTML 1.0 zusätzlich auch 'lang="de"' angeben.

          <hr/>

          Was soll die Trennlinie zwischen Überschrift und Tabelle? Du willst die Überschrift unterstreichen? CSS: 'border-bottom'.

          Nun zu deinem Problem:

          CSS:
          h1
          { text-align:center;
            font-size:xx-large;
          {

          Diese Klammer wolltest du eigentlich schließen?

          Wäre echt super, wenn ihr mir weiterhelfen könntet. Ich zweifel so langsam an meinem Verstand..

          Im Zeifelsfall lieber erstmal am Quelltext zweifeln. Da kann auch der CSS-Validierungsdienst weiterhelfen.

          See ya up the road,
          Gunnar

          --
          „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. XML-Daten in Tabelle anzeigen, diese mit CSS formatieren

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hello out there!

        Welchen kapputen FF hast du denn?

        Der ist schon ganz, meine Denke war kaputt. Dachte, mit dem Speichern kommt man an den wirklich generierten Quelltext.

        Nein, wird es nicht. (STRG+A --> Kontextmenü --> "View selection source";

        So geht’s besser. Die DOCTYPE-Angabe wird allerdings auf die Art nicht mit angezeigt.

        See ya up the road,
        Gunnar

        --
        „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln